Websiteentwicklung: JavaScript: Werte und Variablen

Regeln

JavaScript ist nicht typisiert - d.h. bei der Deklaration einer Variablen liegt der Typ noch nicht fest. Auch kann der Typ einer Variablen während der Programmausführung wechseln. Werte und Variablen können dennoch nur nach bestimmten Regeln verwendet werden:

Feste Werte

Feste Werte - häufig auch „Literale“ genannt und Variablen können von folgendem Typ sein:

string (auch Zeichenketten oder Texte genannt) müssen in einfache oder doppelte Anführungszeichen eingeschlossen sein. Die beiden Möglichkeiten können aber nicht kombiniert werden. "Dies ist eine Zeichenkette in JavaScript" oder 'Dies ist eine Zeichenkette in JavaScript', aber nicht "Dies ist keine Zeichenkette in JavaScript'. Werden innerhalb eines Textes einmal Anführungszeichen benötigt, so müssen diese mit Hilfe des Backslash („\“) als Sonderzeichen maskiert werden. Innerhalb einer Zeichenkette steht dann also \" oder \'.
number - sind Zahlen, gleich ob ganzzahlig oder Dezimalzahl mit Nachkommastellen. Sie werden ohne Anführungszeichen dargestellt. Das im deutschsprachigen Raum übliche Dezimalkomma muss allerdings durch den im angelsächsischen Sprachraum üblichen Dezimalpunkt ersetzt werden. Die Kreiszahl Pi wird also als 3.14159 dargestellt und nicht 3,14159. Punkte in Darstellungen großer Zahlen wie 1.000.000 für eine Million müssen entfallen. Werte vom Typ „Number“ können auf folgende Weise angegeben werden:
- als Integer (Ganzzahl) durch Angabe der Ziffern z.B.: 12
- als Float (Fließkommzahl) durch Angabe der Ziffern und den Dezimalpunkt: z.B. 1.4142
- als Oktalzahl (Zahlssystem auf der Basis 8 mit den Ziffern 0,1,2,3,4,5,6 und 7) durch eine vorangestellte „0“ (nicht zu verwechseln mit dem Buchstaben „o“ oder „O“ !) z.B. 0377 für die Zahl 255 in dezimaler Schreibweise.
- als Hexadezimalzahl (Zahlsystem auf der Basis 16 mit den Ziffern 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E und F) durch ein vorangestelltes „0x“ oder „0X“ - z.B. 0xFF für die Zahl 255 in dezimaler Schreibweise.
boolean - die beiden booleschen Werte (Wahrheitswerte) „Wahr“ und „Falsch“ werden mit
- true (wahr) und
- false (falsch) (ohne Anführungszeichen!) dargestellt.
undefined ist ein Typ mit nur einem Wert: undefined. Er signalisiert eine nicht definierte oder leere Variable.
object sind Objekte. Dazu gehören auch Arrays, reguläre Ausdrücke sowie der Wert null
function sind Funktionen

Variablen

Müssen Werte weiterverarbeitet werden, für die weitere Verwendung gespeichert oder vom Benutzer eingegeben werden, kommen die Variablen ins Spiel. Variablen bezeichnen dem Interpreter eine Speicherstelle, unter der er eine bestimmte Information - einen bestimmten Wert - abrufen kann. Variablen-Namen müssen mit einem Buchstaben beginnen, dürfen keine Leer- oder Sonderzeichen, keine deutschen Umlaute (ä,ö,ü,ß,Ä,Ö,Ü) enthalten und dürfen nicht mit einem der reservierten Worte der JavaScript-Syntax übereinstimmen. Außerdem dürfen Variablen-Namen nicht doppelt verwendet werden. Anders als in anderen Programmiersprachen müssen Variablen in JavaScript nicht deklariert werden und auch keinem bestimmten Typ zugewiesen werden. Dennoch kann eine Variable nur von einem der bereits unter „Werte“ genannten Typ sein. Der Typ kann allerdings während des Programmlaufs wechseln. Wie schon erwähnt unterscheidet JavaScript zwischen Groß- und Kleinschrift - „q“ und „Q“ sind also zwei verschiedene Variablen. Weil die Variablendeklaration in JavaScript nicht erforderlich ist, sind Fehler, die auf solchen Schreibfehlern beruhen, häufig nur sehr schwer zu finden. Der JavaScript-Interpreter entscheidet also selbständig, von welchem Typ die Variable ist und kann diesen Typ sogar zur Laufzeit ändern. Dies scheint eine bequeme Lösung - in der Praxis schleichen sich aber hier Fehler ein, die den Programmieranfänger häufig überraschen. Im folgenden JavaScript/HTML-Listing werden 3 Textfelder erzeugt, der Wert der beiden ersten ausgelesen und deren Summe einem dritten Textfeld zugewiesen. (Bitte ignorieren Sie an dieser Stelle, dass wir über Objekte wie Textfelder und Funktionen eigentlich noch nicht gesprochen haben - außer in unserem Hallo-Welt-Programm.) Der entscheidende Punkt sind hier die Zeilen 10-13 des Listings, die zwei Zahlen addieren sollen. Tatsächlich aber verketten sie die Werte der beiden Textfelder zu einem neuen Text.

Beispiel 1 - fehlerhaft

<html>
  <head>
    <title>Summe von 2 Zahlen - falsche Version</title>
    <script type="text/javascript">
      function fSumme()
        {
          Zahl1 = document.Form1.txtZahl1.value;
          Zahl2 = document.Form1.txtZahl2.value;
          Summe = Zahl1 + Zahl2;
          document.Form1.txtSumme.value = Summe;
        }

    </script>
  </head>
  <body>
    <h3>Summe von 2 Zahlen - falsche Version</h3>
    <form method="get" name="Form1">
      1. Zahl =
      <input type="text" name="txtZahl1"></input>
      <br>
      2. Zahl =
      <input type="text" name="txtZahl2"></input>
      <br>
      <input type="button" name="btnSumme" value="Summe ermitteln" onclick="fSumme()"></input>
      <br>
      Summe =
      <input type="text" name="txtSumme"></input>
    </form>
  </body>
</html>

Beispiel 2 - korrekt

In der korrigierten Version sehen Sie einige kleine Unterschiede. Bei der erstmaligen Verwendung einer Variablen wird diese mit „var“ deklariert. Diese Deklaration kann mit (wie im Beispiel) und ohne Wertzuweisung geschehen. Die erstmalige Wertzuweisung an eine Variable (bei oder nach der Deklaration) nennt man auch die „Initialisierung“ der Variablen.

var iZahl=3      //Deklaration mit  Wertzuweisung - die Variable iZahl erhält den Wert 3
var dQuadratZahl //Deklaration ohne Wertzuweisung - die Variable dQuadratZahl bleibt ohne Wert
var sText="abc"  //Deklaration mit  Wertzuweisung - die Variable sText hat den Wert abc
var bEOF=true    //Deklaration mit  Wertzuweisung - die Variable bEOF erhält den Wert true

Die falsche Berechnung des 1. Beispiels, wird dadurch aber nicht verhindert. Erst durch die JavaScript-Funktion „parseFloat“, die aus einem Text (des Textfeldes) eine Dezimalzahl macht. Die automatische Typzuweisung von Javascript wird mit dieser Anweisung übersteuert und wir erhalten das korrekte Ergebnis.

<html>
  <head>
    <title>Summe von 2 Zahlen - richtige Version</title>
    <script type="text/javascript">

      function fSumme()
        {
          var dZahl1 = parseFloat(document.Form1.txtZahl1.value);
          var dZahl2 = parseFloat(document.Form1.txtZahl2.value);
          var dSumme = dZahl1 + dZahl2;
          document.Form1.txtSumme.value = dSumme;
          }

    </script>
  </head>
  <body>
    <h3>Summe von 2 Zahlen - richtige Version</h3>
    <form method="get" name="Form1">
      1. Zahl =
      <input type="text" name="txtZahl1"></input>
      <br>
      2. Zahl =
      <input type="text" name="txtZahl2"></input>
      <br>
      <input type="button" name="btnSumme" value="Summe ermitteln" onclick="fSumme()"></input>
      <br>
      Summe =
      <input type="text" name="txtSumme"></input>
    </form>
  </body>
</html>

Außer in Variablen können Werte auch als Objekte bzw. Eigenschaften von Objekten gespeichert werden. Über Objekte und die Objektorientierung von JavaScript wird später noch gesprochen werden - eigentlich haben Sie diese aber bereits kennengelernt. Das gesamte HTML-Dokument ist ein Objekt, die HTML-Form ist ein Objekt und ebenso sind die 3 Textfelder und die Befehlsschaltfläche (Button) ein Objekt. Übrigens: Auch mit Objekten geht es sich leichter um, wenn der Typ des Objektes vorangestellt wird. Deshalb heißen die Textfelder hier „txtZahl1“ und „txtZahl2“ bzw. „txtZahl3“ und der Button „btnSumme“. Die Summenbildung „fSumme“ wird durch das vorangestellte „f“ als Funktion bezeichnet.

Geltungsbereich von Variablen

Variablen, die innerhalb einer Funktion mit „var“ deklariert werden, sind nur lokal - d.h. nur innerhalb dieser Funktion gültig. Auch die Parameter, die einer Funktion übergeben werden, sind innerhalb der Funktion nur lokale Variablen - sie können innerhalb der Funktion zwar zu Berechnungszwecken verändert werden, haben jedoch nach Verlassen der Funktion wieder ihren alten Wert. Außerhalb von Funktionen deklarierte Variablen gelten global - sind also innerhalb wie außerhalb der Funktionen gültig. Auch innerhalb von Funktionen ohne das Schlüsselwort „var“ erzeugte Variablen gelten global. Globale, unbeabsichtigt veränderte Variablen sind eine beliebte Fehlerquelle. Versuchen Sie, soweit es geht, mit lokalen Variablen auszukommen und deklarieren Sie alle Variablen explizit mit „var“ - es macht Ihre Programme für Sie und andere lesbarer, weniger fehleranfällig und wartungsfreundlicher.

Arrays

Wikipedia hat einen Artikel zum Thema:

Array

Einen Sonderfall, der von der Konstruktion her zu den Objekten gehört, von der Praxis und vom Verständnis als Daten-Container her hingegen zu Werten und Variablen, bilden die Arrays. Wir werden wegen der fundamentalen Bedeutung in einem späteren Kapitel noch genauer auf die interessanten Eigenschaften und mächtigen Methoden der Arrays eingehen - eine kurze Erwähnung und Erläuterung sollen sie aber bereits in diesem Kapitel finden. Arrays können Werte jeden Typs enthalten, numerische, boolsche und Text (Strings).

Definition

...

Syntax

Arrays werden deklariert mit:

var oName = new Array();

oder kurz:

var oName = [];

Beispiele

oMonate = new Array(12);      // soll später enthalten "Januar", "Februar", ... "Dezember"
oWochenTage = new Array(7);   // soll später enthalten "Montag", "Dienstag", ... "Sonntag"
oMonatsTage = new Array(12);  // soll später enthalten 31, 28, 31, 30, .... 30, 31
oName = new Array()           // wenn noch nicht feststeht, wie viele Elemente erforderlich sind

Zuweisung

Syntax

Arrays können auf verschieden Arten mit Werten versorgt werden. Bei der Definition:

var oName = new Array(Wert1, Wert2, ... Wert n);

oder kurz :

var oName = [Wert1, Wert2, ... Wert n];

oder einzeln per Index:

oName[0] = Wert_1;
oName[1] = Wert_2;
   ...
oName[n-1] = Wert_n;

Beispiele

oMonate = new Array("Januar", "Februar", ... "Dezember");

oWochentage[0] = "Montag";
oWochentage[1] = "Dienstag";
// ...
oWochentage[6] = "Sonntag";

Assoziative Arrays

Bei assoziativen Arrays geschieht der Zugriff auf das Feldelement nicht über einen Index, sondern über ein Schlüsselwort. In Javascript kann jedes Objekt wie ein assoziatives Array verwendet werden.

Ein leeres Objekt kann über "new Object()" oder mit zwei geschweiften Klammern "{}" erstellt werden.

Über for / in Schleifen können die Schlüsselworte und die zugehörigen Werte gelistet werden.

Die Schlüssel können entweder bei der Deklaration als Paare "Schlüssel: Wert", oder separat sowohl über den Indexoperator([]), als auch mit dem Punktoperator zugewiesen werden. Die Zuweisung mit dem Indexoperator hat den Vorteil, dass auch Umlaute und Sonderzeichen als Namen verwendet werden können.

Syntax + Beispiele

var oMonatstage = {
    januar: 31,
    februar: 28,
    maerz: 31
};

oMonatstage.april = 30;
oMonatstage['mai'] = 31;

var oMonatsTage = new Object();

oMonatsTage["Januar"] = 31; // Zuweisung mit dem Indexoperator
oMonatsTage.Februar = 28; // Zuweisung mit dem Punktoperator

Der Operator „typeof“

Sucht man Fehler in einem Script, die vermutlich auf einen Wert oder eine Variable zurückzuführen sind, hilft oft der vorübergehende Einsatz des typeof-Operators, um den Typ eines Wertes oder einer Variablen (oder auch eines Objektes) festzustellen.

Syntax

var variable = 4;
var sTyp = typeof variable;

Beispiel

<html>
  <head>
    <title>Die Typeof-Funktion</title>
    <meta name="description" content="Die Typeof-Funktion">
    <meta name="author" content="S.Möller">
    <meta name="keywords" content="Typeof, Funktion">
    <script type="text/javascript">
       function fTyp()
          {
          var sText="Text";
          document.write("<H2>Die typeof-Funktion</H2><br>");
          document.write("sText hat den Typ: " + typeof(sText)+"<br>");
          var dZahl=3.14159;
          document.write("dZahl hat den Typ: " + typeof(dZahl)+"<br>");
          var bPruef=false;
          document.write("bPruef hat den Typ: " + typeof(bPruef)+"<br>");
          document.write("Math hat den Typ: " + typeof(Math)+"<br>");
          document.write("window hat den Typ: " + typeof(window)+"<br>");
          document.write("3.14159 hat den Typ: " + typeof(3.14159)+"<br>");
          }
    </script>
  <noscript></noscript>
  </head>
  <body onload="fTyp()">
  <H2>Die typeof-Funktion</H2><br>
  </body>
</html>

Aufgaben + Lösungen

<< Das erste Programm (Hallo Welt) | Inhaltsverzeichnis | Index | Weblinks | Operatoren und Ausdrücke >>