JavaScript
Grundlagen
Bevor wir tiefer in die Syntax von JavaScript einsteigen, zeigt Ihnen dieser Abschnitt, wie Sie Skripte in HTML-Seiten einbinden. Im Anschluss daran erklären wir Ihnen die Funktionsweise von Variablen und anderen wichtigen Elementen von JavaScript.
Einbindung in HTML
JavaScript ist eine zu 99 %1 clientseitig eingesetzte Programmiersprache. Das heißt, sie wird vom Browser auf dem Rechner des Nutzers ausgeführt. Da sie HTML unterstützen soll, wird sie auch nur in Verbindung mit HTML eingesetzt. Es gibt mehrere Möglichkeiten, ein Skript in HTML aufzurufen:
- » im Kopf oder Körper der HTML-Seite innerhalb der <script>-Tags.
- » bei einem Ereignis innerhalb der HTML-Seite – beispielsweise onclick; dies ist das Ereignis für einen Mausklick.
- » als externe Datei. Diese wird ebenfalls im <script>-Tag eingebunden.
- » In einem Link mit javascript:.
Skript im Kopf oder Körper der HTML-Seite
Wenn Sie ein Skript im Kopf der HTML-Seite einbinden, müssen Sie es in <script>-Tags setzen. Als Sprache (language) für das Skript wählen Sie natürlich JavaScript.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Skript im Körper der HTML-Seite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<script language="JavaScript"><!--
document.write("Eine Textausgabe");
//--></script>
<p>Text im Körper der HTML-Seite</p>
</body>
</html>
1 Das eine Prozent ist die Verwendung von JScript, der Microsoft-Variante von JavaScript, als Programmiersprache für ASP (Active Server Pages), den Vorläufer von ASP.NET, und die Verwendung von JavaScript in .NET als JScript .NET. In der Praxis sind beide Einsatzgebiete heute allerdings ohne Bedeutung.
Das obige Beispiel gibt mit dem Befehl document.write einen Text aus, der sich in den Anführungszeichen und runden Klammern befindet. Dieser Text wird vor dem Text aus dem <body>-Tag angezeigt.
Die HTML-Kommentare rund um die eigentlichen JavaScript-Befehle <!—und //--> sollen bei sehr alten Browsern verhindern, dass eine Fehlermeldung erscheint. Sie können sie heute allerdings auch getrost weglassen, da alle halbwegs gängigen Browser auch ohne auskommen.
Achtung
document.write() lässt sich im Kopf oder Körper der HTML-Seite einsetzen. Die Gefahr liegt darin, dass der Befehl das komplette Dokument überschreibt, wenn er nach dem Laden des gesamten Dokuments ausgeführt wird. Deswegen sind heute zur Ausgabe eher einige DHTML-Möglichkeiten wie innerHTML zu verwenden.
Skript bei einem Ereignis
Es gibt verschiedene Ereignisse, beispielsweise onclick für einen Mausklick oder onmouseover, wenn der Mauscursor über das Element fährt. Diese Ereignisse können als Attribut in HTML-Tags aufgerufen werden.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Skript bei einem Ereignis</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<img src="bild.png"
onclick="document.write('Textausgabe')" />
</body>
</html>
Im obigen Beispiel wird eine neue Seite mit dem Text »Textausgabe« ausgegeben, wenn Sie auf das Bild klicken.