Einbindungen

Wie CSS in HTML mit dem style-Tag eingebettet wird, gibt es für JavaScript den script-Tag

<script language="javascript" type="text/javascript">
  // hier steht der JavaScript-Code
</script>

Grundsätzlich könnt Ihr außer JavaScript auch andere Skriptsprachen mit dem script-Tag einbinden. Die verwendete Sprache wird mit Hilfe der Attribute 'language' und/oder 'type' (seit HTML 4.0 obligatorisch) angegeben. Es wird aber praktisch ausschließlich JavaScript verwendet. In 'type' gebt Ihr den passenden MIME-Typ an, also 'text/javascript'.

Wie bei externen CSS-Dateien könnt Ihr auch externe JavaScript-Dateien verwenden. Das sind einfache Textdateien, die den JavaScript-Code enthalten und üblicherweise die Endung .js tragen. Sie werden ebenfalls per script-Tag eingebunden, und zwar über das src-Attribut

<script type="text/javascript" src="extern.js">
  // bindet den Inhalt der Datei extern.js ein
</script>

Der script-Tag kann sowohl im Head wie auch im Body der HTML-Datei stehen. Es ist jedoch üblich, JavaScripte in den Head zu schreiben, damit sie im gesamten Body verfügbar sind. JavaScript wird nämlich vom Browser automatisch beim Einlesen der HTML-Datei ausgeführt. Ganz alte Browser, die noch kein JavaScript beherrschen, könnten den Code im Script-Tag als einfachen Text auf die Webseite schreiben. Um das zu verhindern, wird der Code in einen HTML-Kommentar eingefaßt

<script type="text/javascript">
<!--
  // hier steht der JavaScript-Code
//-->
</script>

Der Abschluß des HTML-Kommentars ('-->') muß seinerseits noch einmal als JavaScript-Kommentar ('//') "entwertet" werden, damit er nicht irrtümlicherweise als JavaScript-Code betrachtet wird.

Grundlagen

Vielen von dem, was Ihr in der Einführung gesehen habt, könnt Ihr eins zu eins übernehmen. Daher werde ich hier zunächst einige Details im Schnelldurchlauf besprechen.

In JavaScript werden Variablen mit dem Schlüsselwort 'var' deklariert. Wird eine Variable in einer Funktion deklariert, ist sie lokal in dieser Funktion. Ansonsten ist die Variable global, also im gesamten Dokument verfügbar. Ihr könnt auch eine globale Variable in einer Funktion deklarieren, indem Ihr das Schlüsselwort 'var' weg laßt

<script type="text/javascript">
<!--
  var variable = 0; // globale Variable

  function meineFunktion(wert)
    {
    var andere_variable = 1; // lokale Variable in der Funktion
    // zwar in der Funktion, aber trotzdem global
    noch_eine_variable = wert;
    return (variable+noch_eine_variable); // Rückgabe
    }
//-->
</script>

In diesem Beispiel seht Ihr auch direkt, wie eine Funktion deklariert wird: Nach dem Schlüsselwort 'function' steht der Name der Funktion, gefolgt von den Parametern in Klammern. Da JavaScript relativ schwach typisiert ist, braucht Ihr hier keinen Rückgabetyp oder Parametertyp anzugeben. Die Rückgabe wird mittels 'return' erledigt; es gibt jedoch auch Funktionen, die nichts zurückgeben.

JavaScript ist vollständig objekt-orientiert. Das bedeutet, auf das aktuelle Fenster, das HTML-Dokument und so weiter könnt Ihr mit vordefinierten Objekten zugreifen. Wichtige Objekte sind

window

Dieses Objekt stellt das aktuelle Browserfenster dar. Ihr könnt das Aussehen des Fensters beeinflussen, neue Fenster öffnen und schließen und mehr.

document

document ist eine Schnittstelle zum aktuellen HTML-Dokument. Es bietet zum einen Funktionen, um Text in die Webseite zu schreiben. Außerdem kannst du mit Hilfe des document-Objekts auf die einzelnen Elemente (Texte, Bilder, ...) der Webseite zugreifen und deren Eigenschaften ändern.

navigator

Das navigator-Objekt liefert Euch einige Informationen über den Browser, den der User verwendet. Das ist insbesondere sinnvoll, wenn Ihr verschiedene Versionen für verschiedene Browser benutzt (Stichwort Browserweiche).

Array, string, Math, Date

Arrays sind in JavaScript Objekte der Klasse 'Array'. Diese bietet eine Reihe von Funktionen, beispielsweise sort()

mein_array = new Array(100); // Array erzeugen
... // hier werden die Werte eingetragen
mein_array.sort(); // sortiere das Array

Ähnlich gibt es in der Klasse 'string' eine ganze Reihe von Funktionen, um Strings zu bearbeiten. Die Klasse 'Math' bietet verschiedene mathematische Funktionen als statische Funktionen, beispielsweise sin(), cos(), random(), sqrt(), ... Außerdem bietet die Klasse 'Date' eine Reihe von Funktionen zum Umgang mit Datumsangaben.

Wie bereits erwähnt, wird JavaScript-Code ausgeführt, wenn der Browser darauf stößt. Oft wollt Ihr aber die Ausführung von Code an bestimmte Ereignisse koppeln, beispielsweise an einen Mausklick. Dazu gibt es in JavaScript sogenannte Eventhandler

<img src="event.png" onClick="window.alert('Geklickt!');">

Das sieht dann wie folgt aus:  Klickt einfach mal auf dieses Bildchen ...

Der Eventhandler in diesem Fall ist onClick. Das benutzt Ihr einfach als Attribut Eures Tags und weist ihm als Wert den JavaScript-Code zu. Wenn dieser Code über einen oder zwei Befehle hinausgeht, solltet Ihr ihn als Funktion im Head definieren und mit dem Eventhandler einfach die Funktion aufrufen. Es gibt verschiedene Eventhandler, die Ihr bei verschiedenen HTML-Elementen verwenden könnt. Die wichtigsten

Außerdem könnt Ihr JavaScript-Code an Hyperlinks koppeln

<a href="javascript:window.alert('Geklickt!');">Klick mich!</a>

Der JavaScript-Code wird bei Klick auf den Link ausgeführt: Klick mich!