Einführung

JavaScript (oder kurz JS) ist eine Skriptsprache, welche eingesetzt wird, um aktive Webseiten zu erstellen. Die Sprache kann dazu genutzt werden, HTML-Inhalte zu verändern, zu entfernen oder auch zu hinzufügen. Deshalb wird auch von dynamischem HTML gesprochen.

Der Programmcode von JavaScript wird unverändert an den Browser geschickt und vom Browser ausgeführt (fachlich als interpretiert bezeichnet). Abfragen wie Passwörter oder andere sicherheitsrelevante Informationen sollten daher nicht mittels JavaScript durchgeführt werden.

Die Programmierung in JavaScript kann falls gewünscht objektorientiert erfolgen. Die Sprachbestandteile von JavaScript sind im sogenannten ECMAScript definiert. Auch wenn JS ursprünglich für die Webentwicklung gedacht war, gibt es in der Zwischenzeit auch die Möglichkeit, JavaScript als Sprache auf Servern und Mikrocontrollern zu verwenden.

JavaScript wird in einer sogenannten Sandbox ausgeführt, d. h. das JavaScript-Programm kann nur auf die Inhalte der Browserseite zugreifen. Ein Zugriff auf das Browserfenster (z. B. das Schließen des aktuellen Fensters) oder der Zugriff auf Dateien auf dem Zielsystem sind verboten. Dieses Verfahren ist eines der wichtigsten Sicherheits-Features von JavaScript.

Geschichte

Die Geschichte von JavaScript beginnt bereits im Jahr 1995. Im September 1995 veröffentlichte Netscape die Vorabversion des Netscape Navigators 2.0 mit der integrierten Skriptsprache, die damals noch LiveScript hieß. Bereits Ende des Jahres wurde bekannt gegeben, dass Netscape eine Kooperation mit Sun Microsystems eingehe. Ziel war es mittels der Skriptsprache LiveScript innerhalb von Java-Anwendungen (Applets) interagieren zu können. Auf Grund dieser Kooperation und Änderung wurde die Sprache LiveScript in JavaScript umbenannt.

Die erste Version von JavaScript (1.0.0) wurde im März 1996 veröffentlicht. JavaScript wurde zu diesem Zeitpunkt bereits vom Microsoft Internet Explorer unterstützt. Seit 2006 (JavaScript Version 1.7.0) wird JavaScript von allen gängigen Browsern unterstützt: Mozilla Firefox, Microsoft Internet Explorer, Opera, Apple Safari, Google Chrome.

Die Schnittstelle zur Interaktion in Java-Anwendungen mittels JavaScript (namens LiveConnect) wurde abgesehen von den Browsern Netscape Navigator und Mozilla Firefox in anderen Browsern nie implementiert. LiveConnect existiert heute nicht mehr und wurde mit der Firefox-Version 3.5 entfernt.

Syntax

JavaScript ist vom Syntax an die Programmiersprache C angelehnt. Bevor wir also nun mehr über die Skriptsprache lernen, wollen wir hier erst ein paar grundlegende Regeln zur Notation bzw. zum sogenannten Syntax besprechen.

In JavaScript gibt es sogenannte Statements (zu Deutsch: Anweisungen). Statements können z. B. Variablen-Deklarationen und -Zuweisungen sowie Funktionsaufrufe sein. Anweisungen müssen dabei immer mit einem Semikolon ; abgeschlossen werden.

x = 2 * 7;

Für verschiedene Zwecke kommen die runden Klammern, eckige Klammern und geschweifte Klammern zum Einsatz. Die geschweiften Klammernpaare werden dafür genutzt, Anweisungen in Blöcke zusammen zu fassen. Solche Blöcke werden bei Objekten, Funktionen, Schleifen und Bedingungen eingesetzt. Der Inhalt von Blöcken wird dabei auf Grund der besseren Lesbarkeit um einige Leerzeichen (z. B. 4 Leerzeichen) oder einen Tab eingerückt. Eckige Klammern werden bei Arrays eingesetzt. Runde Klammern hingegen können bei Funktionsaufrufen oder zur Gruppierung bei Berechnungen genutzt werden. Auf die konkrete Nutzung gehen wir in den jeweiligen Themen noch genauer ein.

JavaScript ist case-sensitive, d. h. dass JavaScript bei Schlüsselwörtern, Variablennamen, Funktionsnamen etc. zwischen Groß- und Kleinschreibung unterscheidet. So ist eine Variable (dazu weiter unten mehr) mit dem Namen Nummer also eine andere, wie die Variable mit dem Namen nummer. Zudem hat sich die sogenannte Camel Case Schreibweise durchgesetzt. Dabei werden die einzelnen Wörter von einem Variablennamen groß geschrieben: z. B. KundenNummer. Zudem hat es sich in JavaScript eingebürgert, den ersten Buchstaben klein zu schreiben: z. B. kundenNummer.

Kommentare dienen hauptsächlich zu „Dokumentationszwecken“ und können in JavaScript auf 2 verschiedene Arten notiert werden. Mit den 2 Schrägstrichen // wird die restliche Zeile ab der aktuellen Position auskommentiert. Über die Zeichenfolge /* können wir auch einen mehrzeiligen Kommentar erstellen. Um den Kommentar „zu beenden“, benötigen wir die Zeichenfolge */. Natürlich ist es mit dieser Kommentierungsart auch möglich, nur einen Teil innerhalb einer Zeile auszukommentieren.

// Einzeiliger Kommentar

/*
 * Mehrzeiliger
 * Kommentar
 */
/* Einzeiliger Kommentar */

Platzierung

JavaScript kann wie CSS-Code auch an verschiedenen Stellen platziert werden. Die gängigste Variante ist die Platzierung in einer externen Datei. Hier wird der Code komplett in der JavaScript-Datei (Endung .js) abgelegt. Die Einbindung der Datei erfolgt mittels des zweiteiligen script-Elements. Als Attribut sollte das type-Attribut (MIME-Typ von JavaScript) und das src-Attribut (URL zur Datei) angegeben werden. Dies sieht wie folgt aus:

<script type="text/javascript" src="Diashow.js"></script>

Haben wir nur einen kleineren Code oder betrifft dieser Code nur die aktuelle Seite, so können wir den JavaScript-Code natürlich auch direkt in der HTML-Datei notieren. Hier nutzen wir ebenfalls das script-Element. Das src-Attribtut fällt hier jedoch weg. Der Code selbst wird innerhalb der script-Tags notiert:

<script type="text/javascript">
alert('Hallo!');
</script>

Wichtig: JavaScript-Code wird während dem Laden des HTML-Codes ausgeführt, d. h. wenn Sie JavaScript-Anweisungen innerhalb eines HTML-Dokuments notieren, werden diese vom Browser sofort ausgeführt. Dies kann dazu führen, dass auf Elemente von HTML zugegriffen werden, welche zum aktuellen Zeitpunkt noch gar nicht existieren. Des Weiteren hat dies negative Auswirkung auf die Ladezeit, da das Laden der HTML-Seite angehalten wird, solange der JS-Code ausgeführt und / oder die JavaScript-Datei geladen wird. script-Elemente werden deshalb üblicherweise vor dem schließenden body-Tag notiert. Es gilt zu beachten, dass script-Elemente nur innerhalb von head- und body-Elementen vorkommen dürfen. Des Weiteren sollte JS-Code, welcher beim Laden ausgeführt werden soll, nicht direkt im script-Element, sondern innerhalb des Seitenlade-Events notiert werden. Dazu jedoch später mehr.

JavaScript-Code kann jedoch auch über einen Link (a-Element) ausgeführt werden. Hierfür notieren wir als Wert im href-Attribut javascript: gefolgt von dem auszuführenden JavaScript-Code (normalerweise ein Funktionsaufruf).

<a href="javascript:alert('Hallo!')">Bitte klicken!</a>

Der JS-Code, welcher bei einem Event ausgeführt werden soll, kann zudem direkt im HTML-Code angegeben werden. Dies könnte wie folgt aussehen (näheres dazu später):

<p onclick="alert('Hallo!')">Bitte klicken!</p>

Übrigens: Innerhalb der Event-Attribute von HTML kann das Semikolon weggelassen werden, sofern nur eine Anweisung notiert wird.

Variablen und Datentypen

Variablen können in JavaScript mittels dem Schlüsselwort var deklariert werden. Hinter dem Schlüsselwort muss ein Leerzeichen und anschließend der Variablenname angegeben werden. Der Variablenname muss innerhalb des Gültigkeitbereichs (Scope) eindeutig sein. Der Gültigkeitsbereich einer Variablen erstreckt sich über den aktuellen Block und alle untergeordneten Blöcke. Dieses System werden Sie nachher in der Praxis noch besser kennenlernen.

var variablenName;

Um einer Variablen einen Wert zuzuweisen, nutzen wir das Gleichheitszeichen =. Diesen Vorgang nennt man in der Fachsprache Wertzuweisung oder Variablenzuweisung. Die erste Zuweisung einer Variablen wird als Initialisierung bezeichnet. Eine Variable kann natürlich mehrmals zugewiesen werden.

Anders wie in vielen anderen Programmiersprachen, muss bei der Deklaration einer Variablen kein Typ angegeben werden. Trotzdem gibt es in JavaScript Datentypen: Number, Boolean, String, Object und Array.

Der Datentyp Number enthält, wie sich schon vom Englischen ableiten lässt, nummerische Werte. Dabei kann es sich sowohl um Dezimalwerte als auch um Gleitkommawerte (Werte mit Nachkommastellen) handeln. JavaScript speichert alle Werte intern als 64bit Gleitkommawerte (IEEE 754) ab. Dezimalzahlen können neben der geläufigen Dezimaldarstellung auch hexadezimal (mit führendem 0x) oder oktal (mit führender 0) angegeben werden. Bei Gleitkommazahlen wird als Trennzeichen ein Punkt angegeben. Das folgende Beispiel zeigt die Verwendung nummerischer Werte und der mehrmaligen Wertzuweisung einer Variablen:

var nummer = 12;
var nummer2 = 37.59;

// Hier eine weitere Zuweisung
nummer = 47;

// Und nochmal eine
nummer = 79;

Der Datentyp Boolean stellt einen Datentyp mit zwei möglichen Zuständen dar: true (wahr) und false (unwahr).

var status = true;

String ist der Datentyp für sogenannte Zeichenketten. Zeichenketten stellen eine Aneinanderreihung von Zeichen (Buchstaben, Zahlen und Sonderzeichen) dar und müssen in doppelten oder einfachen Anführungszeichen angegeben werden. Eine Zeichenkette kann dabei kein, ein oder mehrere Zeichen enthalten.

var name = "Peter";

Zu den Datentypen Object und Array gehen wir später genauer ein.

Wollen wir mehrere Variablen auf einmal deklarieren, so können wir diese durch Kommas trennen. Zu beachten gilt jedoch, dass jede Variable, welche initialisiert werden soll, separat initialisiert werden muss.

var zahlA = 17, zahlB = 23, zahlC;

Zusätzlich gibt es in JavaScript noch die zwei Spezial-Datentypen bzw. Werte undefined und null. Eine Variable, welche deklariert ist, jedoch noch keinen Wert zugewiesen bekommen hat, besitzt den Wert undefined (undefiniert). Der Wert null kann jeder Variablen zugewiesen werden und ist ein allgemeiner Wert für „ungültige Variablen“.

Ausgabe

Nun wird es erst spannender, denn jetzt wollen wir damit anfangen, das erste JavaScript-Skript zu schreiben. Doch hierfür müssen wir erst noch wissen, wie wir in JavaScript eine einfache Ausgabe erzeugen können.

Die einfachste Möglichkeit ist die Verwendung der in JavaScript integrierten Funktion alert(). Hierfür notieren wir den Funktionsnamen alert, gefolgt von einer öffnenden runden Klammer (. Anschließend notieren wir die Zeichenkette. Diese kann direkt angegeben werden, so wie im Beispiel, oder mittels einer Variablen übergeben werden. Nun folgt als nächstes die schließende runde Klammer ). Wie bereits oben schon angesprochen, ist ein solcher Funktionsaufruf ein Statement und muss deshalb mit einem Semikolon abgeschlossen werden. Die alert()-Funktion erzeugt ein Meldungsfenster, was eine Art PopUp-Fenster darstellt. Eine mit dieser Funktion erzeugte Meldung besitzt immer einen OK-Button.

alert("Hallo!");

Zusätzlich gibt es noch die Funktionen confirm() und prompt(). confirm() zeigt ein Fenster mit OK- und Abbrechen-Button an. Als Rückgabewert gibt die Funktion true (falls OK-Button gedrückt wurde) oder false (falls Abbrechen-Button gedrückt wurde) zurück. Der confirm()-Funktion wird ebenfalls eine Zeichenkette übergeben. Der Aufruf der Funktion prompt() erzeugt ein Fenster mit Eingabefeld. Als Parameter (Werte, welche übergeben werden und innerhalb des Klammernpaars notiert sind) werden zwei Zeichenketten übergeben. Die Erste stellt die „Beschriftung“ dar, wohingegen die Zweite der anzuzeigende Wert im Textfeld ist. Die beiden Parameter werden dabei (wie es bei anderen Funktionen auch der Fall ist) durch ein Komma getrennt. Der zweite Parameter ist optional und kann somit weggelassen werden. Ein Fenster, welches mit der prompt()-Funktion erzeugt wurde, besitzt ebenfalls zwei Buttons: „OK“ und „Abbrechen“. Wird auf „Abbrechen“ geklickt so gibt die Funktion den Wert null zurück. Wird auf „OK“ geklickt, so gibt die Funktion den Text des Textfeldes zurück. Im unteren Beispiel werden die drei Funktionen demonstriert. Um zu sehen, was die Funktionen zurückgeben, werden beide Rückgabewerte mit Hilfe von alert() ausgegeben.

alert(confirm("Sind Sie damit einverstanden?"));
alert(prompt("Geben Sie Ihren Namen ein:", "Peter"));

Mit der Funktion write() des document-Objektes (dazu später mehr) ist es möglich, Daten in das HTML-Dokument zu schreiben. In der Praxis wird diese Funktion eher selten genutzt. Für die ersten Tests ist diese Funktion jedoch sehr hilfreich, da diese im Gegensatz zu den Meldungsfenster den Text einfach nur auf die Seite schreibt und keine PopUps erzeugt. Um die Funktion aufzurufen, notieren wir document.write(). Dabei muss am Ende ebenfalls wieder ein Semikolon angestellt werden. Als Parameter wird der Funktion eine Zeichenkette übergeben.

document.write("Hallo!");