Ein JavaScript-Programm hantiert mit Daten unterschiedlichen Art. Jeder Wert in JavaScript hat einen gewissen Typ. Alle Werte eines Typs ähneln sich. Sie haben gewisse Eigenschaften und Fähigkeiten.
Es gibt in JavaScript theoretisch eine unbegrenzte Anzahl von Typen, denn Sie können selbst neue Typen erschaffen. Es gibt jedoch eine kleine Anzahl von Grundtypen, von denen alle anderen abgeleitet sind.
Genau gesagt gibt es sieben Grundtypen in JavaScript:
Mit den ersten sieben Typen lassen sich sogenannte einfache Werte (englisch primitive values) erzeugen. Ein einfacher Wert ist das Gegenteil eines komplexen Wertes. Er lässt sich nicht weiter auspacken und zerlegen.
Der siebte Typ, Object, umfasst alle Objekte. Das sind eine ganze Menge, denn es gibt viele Unter-Typen, die vom Typ Object abgeleitet sind. Werte dieser Typen sind komplex. Das heißt, sie sind aus einfachen Werten aufgebaut.
Schauen wir uns die Grundtypen im Einzelnen an.
undefinedDer Typ Undefined hat nur einen möglichen Wert, nämlich undefined. Das klingt erst einmal verwirrend. Manche Werte sind aber so einzigartig, dass sie ihren eigenen Typ haben.
Der Wert undefined steht für »leer, noch kein Wert zugewiesen«. Verschiedene JavaScript-interne Operationen können undefined zurückgeben.
Wenn Sie zum Beispiel eine Variable deklarieren, ohne ihr einen Wert zuzuweisen, so hat die Variable dennoch einen Wert – nämlich undefined. Wenn Sie auf eine Eigenschaft eines Objekts zugreifen, die nicht existiert, so bekommen Sie den Wert undefined zurück.
undefined wird also intern in JavaScript an verschiedenen Stellen genutzt, um »kein Wert« darzustellen.
…
nullDer Typ Null hat ebenfalls nur einen möglichen Wert, nämlich null.
Der Wert null steht für »absichtlich kein Wert«. Er steht auch für »absichtlich kein Objekt« dort, wo ein Objekt sein könnte.
Es gibt in JavaScript beispielsweise Funktionen, die üblicherweise Objekte zurückgeben. Wenn Sie kein Objekt zurückgeben können, etwa weil sie nichts gefunden haben, dann geben sie null zurück.
Der Unterschied zwischen undefined und null ist sehr subtil. Beide sind Platzhalter für »leer« und »kein Wert« mit dem feinen Unterschied »kein Wert zugewiesen« und »absichtlich kein Objekt«.
Der Typ Boolean drückt einen Wahrheitswert aus. Der Name Boolean geht auf den englischen Mathematiker George Boole, der zur Logik forschte.
Es gibt genau zwei Boolean-Werte:
true: wahr, trifft zufalse: falsch, trifft nicht zuWenn Sie einen Wahrheitswert notieren möchten, können Sie einfach direkt true oder false notieren:
var visible = false;
Boolean-Werte werden überall dort benutzt, wo es um Ja/Nein-Entscheidungen geht: Enthält eine Liste einen gesuchten Wert? Ist ein Element sichtbar? Ist die Eingabe in ein Formularfeld gültig? Ist der Benutzer eingeloggt?
Boolean-Werte sind auch das Ergebnis von Vergleichsoperatoren: alter >= 18 – ist das Alter größer oder gleich 18? userName === '' – ist der Nutzername leer?
Der Typ String (englisch für Faden, Schnur) erlaubt das Arbeiten mit Zeichenketten. Darin können Sie einzelne Zeichen bis hin zu ganzen Texten speichern. Es sind alle Zeichen möglich, die im globalen Unicode-Standard registriert sind. Das sind die Buchstaben, Zeichen und Symbole aller großen und kleinen Schriften und Sprachen.
Strings können Sie mithilfe des String-Literals erzeugen. Er beginnt und endet mit einfachen oder doppelten Anführungszeichen. Dazwischen werden die gewünschten Zeichen notiert. Zum Beispiel:
var vorname = 'Alice'; var nachname = "Lidell";
Ob Sie als Begrenzer zwei einfache Anführungszeichen '…' oder zwei doppelte Anführungszeichen "…" benutzen, ist Ihnen überlassen. Beide Schreibweisen sind gleichwertig. Allerdings ergeben sich Probleme, wenn der String selbst diese Zeichen enthält. Innerhalb des Strings können Sie die jeweiligen Begrenzer nicht verwenden:
var text = ""Nein, gewiß nicht!" sagte Alice"; // Fehler! var text = ''Nein, gewiß nicht!' sagte Alice'; // Fehler!
Eine Lösungsmöglichkeit ist, die jeweils anderen Anführungszeichen zu verwenden, die nicht im String verwendet werden:
var text = '"Nein, gewiß nicht!" sagte Alice'; var text = "'Nein, gewiß nicht!' sagte Alice";
Oder Sie machen die Begrenzer innerhalb des Strings mit einem Schrägstrich \ davor unschädlich. Aus " wird \" und aus ' wird \':
var text = "\"Nein, gewiß nicht!\" sagte Alice"; var text = '\'Nein, gewiß nicht!\' sagte Alice';
JavaScript-Programme arbeiten häufig mit Strings. Die meisten Nutzereingaben und Dokumentinhalte sind einzelne Zeichen oder längere Texte, die in JavaScript als Strings vorliegen.
Ein Number-Wert ist eine Zahl. Es kann eine Ganzzahl oder eine Kommazahl sein, positiv oder negativ.
Nachdem wir uns die Typen angeschaut haben, die einfache Werte bilden, fehlt der siebte Grundtype: Object für sämtliche Objekte.
Ein Objekt ist eine Zuordnungsliste, in der gewissen Namen gewisse Werte zugewiesen werden. Die einfachste Art, ein allgemeines Objekt zu erzeugen, ist der Objekt-Literal:
var adresse = {
name: 'Erika Gabler',
straße: 'Königsallee 56',
stadt: 'Frankfurt'
};
Genauer schauen wir uns diese im Kapitel über Objekte an.
Wie gesagt gibt es viele Unter-Typen, die vom Type Object abgeleitet sind: Function, Array, RegExp, Date, Error, Map, Set und viele mehr.
JavaScript unterscheidet zwischen einfachen Werten (englisch primitive values) und komplexen Objekten. Allerdings verhalten sich auch einfache Werte in gewissen Situationen wie Objekte. Sie werden intern in Objekte umgewandelt, wenn Sie auf Objekt-Eigenschaften dieser Werte zuzugreifen. Das gilt für Werte der Typen Boolean, Number, String und Symbol.
Schauen wir uns die Unterschiede zwischen einfachen Werten und Objekten an.
Einfache Werte werden als Kopie an Funktionen übergeben, während Objekte als Referenzen übergeben werden. Eine Referenz ist die Adresse im Speicher, wo das Objekt abgelegt wurde.
Gegeben ist folgender Fall: Sie notieren ein Objekt und speichern es in einer Variable. Dieses Objekt übergeben Sie einer Funktion. In der Funktion nehmen Sie Änderungen am Objekt vor, fügen ihm z.B. eine Eigenschaft hinzu.
function setzeNamen(nutzer, vorname, nachname) {
// »nutzer« zeigt auf dasselbe Objekt wie »alice«!
nutzer.name = vorname + ' ' + nachname;
}
var alice = {};
setzeNamen(alice, 'Alice', 'Liddell');
window.alert(alice.name); // Ausgabe: »Alice Lidell«
In diesem Beispiel wird ein leeres Objekt nutzer einer Funktion übergeben, die verschiedene Eigenschaften hinzufügt.
Das Objekt wird als Referenz übergeben. Das heißt, Änderungen daran ändern das Originalobjekt. Sie haben nach dem Funktionsaufruf auf das geänderte Objekt Zugriff. Denn an beiden Stellen, innerhalb und außerhalb der Funktion, haben Sie Zugriff auf ein und dasselbe Objekt.
Schauen wir uns zum Vergleich einfache Werte an. Wenn Sie einen einfachen Wert einer Funktion übergeben wird, dann haben Änderungen daran keine Auswirkung auf die Variable außerhalb der Funktion.
function quadrat(zahl) {
zahl = zahl * zahl;
}
var i = 5;
quadrat(i);
window.alert(i); // Ausgabe: »5«
In diesem Beispiel wird eine Zahl einer Funktion übergeben, die dessen Wert um 1 erhöht. Dies ändert zwar den Wert der Funktionsvariable zähler, aber nicht den Wert der äußeren Variable i. Das Beispiel ergibt somit keinen Sinn.
Wenn Sie einfache Werte an eine Funktion übergeben und sie verändern wollen, dann muss die Funktion einen neuen Wert zurückgeben. Sie arbeiten dann mit dem Rückgabewert der Funktion weiter:
function quadrat(zahl) {
return zahl * zahl;
}
var i = 5;
var j = quadrat(i);
window.alert(j); // Ausgabe: »25«
Die Vergleichsoperatoren == und === ergeben beim Vergleich zweier Objekte nur dann true, wenn es sich um ein und dasselbe Objekt handelt. Zwei Objekte können also niemals gleich sein, es sei denn, sie sind identisch.
var objekt1 = { name: 'Alice' };
var objekt2 = { name: 'White Rabbit' };
var objekt3 = { name: 'Alice' };
// Ausgabe: »false«
window.alert(objekt1 === objekt2);
// Ausgabe: »false«
window.alert(objekt1 === objekt3);
Das Beispiel zeigt, dass die Inhalte der Objekte nicht angeschaut und nicht miteinander verglichen werden. objekt1 sind zwar in all ihren Eigenschaften gleich, aber sie sind nicht identisch. Es sind immer noch zwei Objekte.
Bei einfachen Werten hingegen gibt es eine Gleichheit unabhängig von der Identität: "Hallo Welt" === "Hallo Welt" ergibt erwartungsgemäß true, obwohl es sich um zwei Werte handelt.
Die Werte der Typen Boolean, String, Symbol, Number und Object haben gewisse Gemeinsamkeiten. Sie haben Eigenschaften und Methoden, die sie von den Kernobjekten und den daran gespeicherten Prototypen erben.
Beispielsweise haben alle String-Werte die Methode toUpperCase. Sie wandelt alle Zeichen im String in Großbuchstaben um:
window.alert( "Hallo Welt!".toUpperCase() ); // Ausgabe: »HALLO WELT!«
Die Kernobjekte heißen genau so wie die genannten Typen: Boolean, String, Symbol, Number und Object. Sie sind global verfügbar. Es sind Konstruktoren, an den auch der Prototyp hängt. Genaueres über Konstruktoren und Prototypen finden sie im entsprechenden Kapitel.
Fürs Erste können Sie sich merken, dass die Werte der Grundtypen ihre Methoden von den Kernobjekten bekommen. Die Methode toUpperCase bei Strings kommt beispielsweise von String.prototype.toUpperCase. Wenn Sie also nachschlagen möchten, welche Methoden zur Verfügung stehen, schauen Sie in der Referenz des jeweiligen Kernobjekts nach.
Funktionen sind Objekte des Typs Function, ein Unter-Typ von Object.
Ein JavaScript-Programm ist üblicherweise in verschiedene Funktionen unterteilt, die einander aufrufen. Eine Funktion gruppiert zusammengehörige Anweisungen und löst eine gewisse isolierbare Teilaufgabe. Anstatt denselben oder ähnlichen Code immer wieder zu notieren, schreibt man stattdessen eine Funktion, die mehrfach aufgerufen werden kann. Durch sogenannte Parameter können ihr bei jedem Aufruf andere Daten gesendet werden.
Näheres dazu finden Sie im Kapitel über Funktionen.
Arrays sind Objekte des Typs Array, ein Unter-Typ von Object.
Ein Array ist eine numerische geordnete Liste mit Werten. Immer wenn mehrere Werte in einer bestimmten Abfolge gespeichert werden sollen, ist ein Array die passende Datenstruktur.
Meistens sind die Werte gleichförmig. Das heißt, ein Array enthält Strings, Zahlen oder gleich aufgebaute Objekte. Es ist aber auch möglich, dass ein Array ganz unterschiedliche Werte enthält.
Ein Array können Sie mit der Literalschreibweise erzeugen: Am Anfang steht eine öffnende eckige Klammer [, am Ende steht eine schließende eckige Klammer ]. Dazwischen können Sie die Einträge des Arrays notieren, auch Elemente genannt. Mehrere Elemente können durch Komma getrennt werden.
Ein leerer Array sieht demnach so aus: []. Ein Array mit den drei String-Werten 'Margarethe', 'Michael' und 'Monika' sieht so aus: [ 'Margarethe', 'Michael', 'Monika' ].
Hier sind einige Beispiele für Arrays:
var städte = [ 'Berlin', 'Köln', 'Hamburg', 'München', 'Frankfurt' ];
var lottozahlen = [ 4, 12, 23, 33, 42, 44 ];
var mitarbeiter = [
{
name: 'Margarethe',
geburtsdatum: new Date(1972, 4, 12),
durchwahl: 401
},
{
name: 'Michael',
geburtsdatum: new Date(1962, 11, 2),
durchwahl: 402
},
{
name: 'Monika',
geburtsdatum: new Date(1958, 5, 25),
durchwahl: 403
}
];
Jeder Array hat eine Eigenschaft length, die die Anzahl der Element im Array zurückgibt. Ein Beispiel:
var leererArray = []; window.alert(array.length); // Ausgabe: »0« var gefüllterArray = [ 'ein Element' ]; window.alert(gefüllterArray.length); // Ausgabe: »1«
Jedes Element im Array bekommt einen fortlaufenden numerischen Index zugeordnet. Unter diesem Index ist der Wert gespeichert. Der Index fängt immer bei 0 an zu zählen, nicht bei 1. Das heißt, das erste Element im Array hat den Index 0, das zweite Element den Index 1 und so weiter.
Sie können auf ein Element des Arrays anhand seines Indexes zugreifen: array[index]. Das ist der Operator zum Zugriff auf Objekteigenschaften. Dieser nutzt verwirrenderweise auch wieder eckige Klammern, die aber hinter dem Array oder Variablennamen stehen. Zwischen den Klammern notieren Sie den Index. Zum Beispiel:
var städte = [ 'Berlin', 'Köln', 'Hamburg', 'München', 'Frankfurt' ]; window.alert(städte[0]); // Ausgabe: »Berlin« window.alert(städte[1]); // Ausgabe: »Köln« window.alert(städte[2]); // Ausgabe: »Hamburg« window.alert(städte[3]); // Ausgabe: »München« window.alert(städte[4]); // Ausgabe: »Frankfurt«
Das Beispiel liest die Elemente nur aus. Es ist auch möglich, ein Element zu überschreiben, indem Sie dem Index einen neuen Wert zuweisen:
städte[0] = 'Potsdam'; städte[1] = 'Bonn'; städte[2] = 'Buxtehude';
Array-Objekte bieten zahlreiche nützliche Methoden, um dem Array ein Element anzuhängen, den Array zu durchlaufen, zu filtern und aus den bestehenden Elementen einen neuen Array zu erzeugen.
Mit regulären Ausdrücken lassen sich Muster für Zeichenabfolgen notieren, mit deren Hilfe sich Texte durchsuchen und automatisierte Ersetzungen vormehmen lassen. Mit einem regulären Ausdruck kann beispielsweise geprüft werden, ob ein String in einer bestimmten Weise aufgebaut ist und somit einer Konvention entspricht.
Wenn ein Formularfeld nur eine ganze Zahl enthalten darf, dann lässt sich mit einem regulären Ausdruck testen, ob das Feld tatsächlich nur Ziffern enthält. Enthält es noch andere Zeichen oder einen Komma-Wert, so kann der Wert vor dem Absenden des Formulars automatisch korrigiert werden.
Reguläre Ausdrücke sind eigene Objekte vom Typ RegExp. Um ein solches Objekt zu erzeugen, können wir einen RegExp-Literal notieren oder new RegExp() aufrufen. …
…
…
DOM-Knoten, Elementobjekte, …