SELFHTML: Dynamisches HTML / JavaScript in HTML
Description: (SELFHTML 7.0) Der Zusammenhang zwischen HTML und JavaScript und wie Sie JavaScript in HTML einbinden können.
Keywords: SELFHTML, JavaScript, ECMAScript, JScript, HTML

SELFHTML/Quickbar JavaScript

| ## JavaScript in HTML
| JavaScript und HTML JavaScript, JScript, ECMAScript, Sprachversionen Hinweise für die Praxis JavaScript-Bereiche in HTML definieren JavaScript-Elemente in HTML-Tags JavaScripts in separaten Dateien

## JavaScript und HTML

JavaScript ist kein direkter Bestandteil von HTML, sondern eine eigene Programmiersprache. Diese Sprache wurde jedoch eigens zu dem Zweck geschaffen, HTML-Autoren ein Werkzeug in die Hand zu geben, mit dessen Hilfe sich WWW-Seiten optimieren lassen.

JavaScript-Programme werden wahlweise direkt in der HTML-Datei oder in separaten Dateien notiert. Sie werden nicht - wie etwa Java-Programme - compiliert, sondern als Quelltext zur Laufzeit interpretiert, also ähnlich wie Batchdateien bzw. Shellscripts. Dazu besitzen moderne WWW-Browser wie Netscape oder Microsoft Internet Explorer entsprechende Interpreter-Software.

In einer Programmiersprache wie JavaScript gibt es für Anfänger viele verwirrende Elemente: Sonderzeichen, Variablen, Wenn-Dann-Anweisungen, Schleifen, Funktionen, Methoden, Parameter, Objekte, Eigenschaften und anderes mehr. Um mit diesen Elementen richtig umgehen zu können, müssen Sie lernen sich vorzustellen, was im Computer passiert, wenn der Programmcode ausgeführt wird. Das ist ein langwieriger Lernprozeß, den Anfänger nur durch viel Übung bewältigen. JavaScript ist dazu allerdings hervorragend geeignet, weil es eine vergleichsweise einfache Sprache ist, bei der viele Aufgabenbereiche einer "großen" Programmiersprache fehlen, z.B. Dinge wie Arbeitsspeicherverwaltung oder Dateioperationen. Außerdem setzt JavaScript auf einer bestimmten Umgebung auf, nämlich auf einer anzuzeigenden oder angezeigten WWW-Seite.

## JavaScript, JScript, ECMA-262, Sprachversionen

JavaScript ist eine Scriptsprache, die von Netscape eingeführt wurde und von Netscape lizenziert ist. Deshalb beherrschen die jeweils neuen Versionen des Netscape-Browsers auch immer etwas mehr JavaScript als die Konkurrenz, die nur abwarten kann, was Netscape an Neuigkeiten implementiert.

Netscape 2.0 interpretiert den seinerzeit eingeführten JavaScript-Sprachstandard 1.0. Der MS Internet Explorer versteht diesen Sprachstandard weitgehend seit der Version 3.0.
Netscape interpretiert seit Version 3.0 den JavaScript-Standard 1.1. Der MS Internet Explorer interpretiert diesen Sprachumfang von JavaScript weitgehend seit der Produktversion 4.0.
Netscape interpretiert seit Version 4.0 den JavaScript-Standard 1.2. Einige Befehle dieser Sprachversion werden auch vom MS Internet Explorer 4.0 interpretiert.
Weiterhin unterscheiden sich Netscape und der MS Internet Explorer in der Interpretation einzelner Objekteigenschaften. So funktionieren beispielsweise Cookies (ein bekanntes JavaScript-Feature) bei Netscape auch lokal, während der MS Internet Explorer, zumindest in der Version 3.x, eine HTTP-Verbindung voraussetzt, um Cookies zu unterstützen. Auch bei internen Abläufen, etwa bei vielfach zu durchlaufenden Schleifen, gibt es Unterschiede zwischen einzelnen Browsern und Browser-Versionen.

Der MS Internet Explorer 4.x interpretiert zwar JavaScript, daneben aber auch die Microsoft-eigene Sprachvariante JScript, die spezielle Befehle für die Betriebssystemerweiterungen des MS Internet Explorers bereitstellt.

Sowohl Netscape als auch Microsoft betonen, daß sie sich mit ihren Sprachinterpretern am Standard für Internet-Scriptsprachen, an ECMA-262, orientieren. Das ECMA-Kommittee, dem verschiedene Software-Hersteller, unter anderem Microsoft und Netscape, angehören, ist bemüht, auch im Bereich der Scriptsprachen einen allgemeingültigen Standard zu definieren, so wie es bei HTML oder CSS Style Sheets der Fall ist.

Im WWW können Sie sich über Scriptsprachen, Standards, Versionen usw. an folgenden Adressen schlau machen:

Netscape Library Documentation.
Entwickler-Dokumentation von Netscape. Zu JavaScript im Frame-Set der Seite auf den Verweis "JavaScript" klicken.

Microsoft Scripting.
Einstiegsseite zu allen Script-Technologien, die der MS Internet Explorer beherrscht.

ECMAScript-262 Spezifikation.
Die Spezifikation für Bestandteile einer standardisierten Scriptsprache für WWW-Seiten

Zur Kennzeichnung der Sprachversionen werden in der vorliegenden Dokumentation folgende Symbole verwendet:

| JavaScript-Sprachstandard 1.0.
| JavaScript-Sprachstandard 1.1.
| JavaScript-Sprachstandard 1.2.
| Von Microsoft eingeführter Sprachbestandteil. Solche Bestandteile werden in der Regel nur vom MS Internet Explorer ab V4.x interpretiert; es wurden nur einige wichtige solcher Elemente in die Objekt-Referenz mit aufgenommen, nämlich solche, die eine Grundlage für Dynamisches HTML nach dem Ansatz des MS Internet Explorers darstellen.

## Hinweise für die Praxis

Bevor Sie daran gehen, neuen, eigenen JavaScript-Code zu programmieren, müssen Sie sich exakt darüber im klaren sein, welches Problem Sie damit lösen wollen. Dazu müssen Sie erst einmal wissen, was man mit HTML selbst alles machen kann, und wo die Grenzen von HTML liegen. Von JavaScript müssen Sie dann so viel wissen, daß Sie entscheiden können, ob das Problem mit JavaScript überhaupt lösbar ist. Mit JavaScript können Sie z.B. nicht die typischen Aufgaben von CGI-Scripts lösen!

Ferner sollten Sie sich im WWW umsehen, ob es nicht schon frei verfügbare JavaScript-Beispiele gibt, die genau Ihr Problem lösen. Denn es ist immer besser, auf Code zurückzugreifen, der sich in der Praxis bereits bewährt hat, als neuen Code zu erstellen, dessen "heimliche Tücken" einem noch nicht bekannt sind. In vielen Fällen genügt es, vorhandene JavaScripts den eigenen Erfordernissen anzupassen. Eine gute Einstiegsadresse für die Suche nach JavaScripts ist das WWW-Angebot Kakao und Kekse von Johannes Gamperl. Bei vorhandenen JavaScripts müssen Sie allerdings so viel von der Sprache verstehen, daß Sie genau wissen, welche Variablen oder festen Werte Sie verändern oder welche Funktion Sie ergänzen wollen.

Wenn Sie JavaScript für wichtige WWW-Seiten verwenden wollen, sollten Sie auf jeden Fall mehrere Browser zum Testen einsetzen. Denn leider sind die JavaScript-Interpreter der beiden JavaScript-fähigen WWW-Browser Netscape und MS Internet Explorer sehr unterschiedlich in ihrer Leistung.

Stellen Sie keine WWW-Seiten mit ungeprüftem JavaScript-Code ins WWW. Für einen Anwender ist es sehr ärgerlich, wenn er Fehlermeldungen des JavaScript-Interpreters am Bildschirm erhält und in schlimmeren Fällen einen Programmabsturz des WWW-Browsers oder gar einen Systemabsturz hat, was bei Online-Sitzungen besonders unangenehm ist.

## JavaScript-Bereiche in HTML definieren

Für JavaScript-Programmabschnitte können Sie in HTML Bereiche definieren.

### Beispiel:

    <html><head><title>Test</title>
    <script language="JavaScript">
    <!--
     alert("Hallo Welt!");
    //-->
    </script>
    </head><body>
    </body></html>

### Erläuterung:

Mit `<script language="JavaScript">` leiten Sie einen Bereich für JavaScript innerhalb einer HTML-Datei ein (script = Quelltext, language = Sprache). Dahinter - am besten in der nächsten Zeile - sollten Sie mit `<!--` einen Kommentar einleiten. Dadurch erreichen Sie, daß ältere WWW-Browser, die JavaScript nicht kennen, den folgenden JavaScript-Code ignorieren und nicht irrtümlich als Text innerhalb der HTML-Datei interpretieren.

Im obigen Beispiel wird mit Hilfe von JavaScript ein Meldungsfenster mit dem Text "Hallo Welt!" am Bildschirm ausgegeben.

Am Ende eines JavaScript-Bereichs schließen Sie mit `//-->` den Kommentar und mit `</script>` den Bereich für den Programmcode.

### Beachten Sie:

Es gibt keine festen Vorschriften dafür, an welcher Stelle einer HTML-Datei ein JavaScript-Bereich definiert werden muß. Es ist unter JavaScript-Programmierern zur Gewohnheit geworden, einen solchen Bereich im Kopf der HTML-Datei, also zwischen `<head>` und `</head>` zu definieren. Dadurch ist am ehesten sichergestellt, daß der Code vom WWW-Browser bereits eingelesen ist und zur Verfügung steht, wenn er ausgeführt werden soll.

JavaScript-Code kann automatisch beim Einlesen der HTML-Datei ausgeführt werden. Das ist dann der Fall, wenn JavaScript-Befehle in einem JavaScript-Bereich außerhalb jeder selbst definierten Funktion stehen, so wie im obigen Beispiel. In solchen Fällen ist es manchmal auch erforderlich, den Script-Bereich innerhalb des HTML-Dateikörpers, also innerhalb von `<body>`...`</body>`, zu notieren. Zum Beispiel, wenn Sie am Ende der Datei mit JavaScript dynamisch Datum und Uhrzeit der letzten Änderung an der Datei schreiben wollen.

## JavaScript-Elemente in HTML-Tags

JavaScript kann auch innerhalb herkömmlicher HTML-Tags vorkommen. Das ist dann kein komplexer Programmcode, sondern in der Regel nur der Aufruf bestimmter Methoden, Funktionen, Objekte, Eigenschaften. Für den Aufruf gibt es sogenannte Event-Handler. Das sind JavaScript-eigene Attribute in HTML-Tags. Für jeden der möglichen Event-Handler ist festgelegt, in welchen HTML-Tags er vorkommen darf.

### Beispiel:

    <html>
    <head>
    <title>JavaScript-Test</title>
    <script language="JavaScript">
    <!--
     function Quadrat(Zahl)
      {
       Ergebnis = Zahl * Zahl;
       alert("Das Quadrat von " + Zahl + " = " + Ergebnis);
      }
    //-->
    </script>
    </head>
    <body>
    <form>
    <input type=button value="Quadrat von 6 errechnen" onClick="Quadrat(6)">
    </form>
    </body>
    </html>

### Erläuterung:

Das obige Beispiel zeigt eine komplette HTML-Datei. Im Dateikopf ist ein JavaScript-Bereich definiert. Innerhalb dieses Bereichs steht eine selbst definierte Funktion, die Funktion mit dem Namen `Quadrat(x)`. Die Funktion bekommt beim Aufruf eine Zahl x übergeben. Sie errechnet das Quadrat dieser Zahl und gibt das Ergebnis in einem Meldungsfenster aus. Dieser JavaScript-Code wird aber nur ausgeführt, wenn die Funktion explizit aufgerufen wird. Im obigen Beispiel erfolgt der Aufruf mit Hilfe eines Klick-Buttons. Wenn der Anwender auf den Button klickt, wird die Funktion ausgeführt.

### Beachten Sie:

Bei den Event-Handlern wird beschrieben, was solche Angaben wie `onClick=` (wie im obigen Beispiel) bedeuten, und in welchen HTML-Tags sie vorkommen dürfen.

## JavaScripts in separaten Dateien

Seit der Sprachversion 1.1 von JavaScript (und auch seit HTL 4.0) ist es möglich, JavaScript-Code in separaten Dateien zu notieren. Das ist sehr nützlich, wenn Sie gleiche JavaScript-Funktionen in mehreren HTML-Dateien verwenden wollen. Denn so brauchen Sie den Code nur einmal notieren und können ihn in mehreren HTML-Dateien referenzieren.

### Beispiel: (HTML-Datei)

    <html>
    <head>
    <title>JavaScript-Test</title>
    <script language="JavaScript" src="quadrat.js" type="text/javascript">
    </script>
    </head>
    <body>
    <form>
    <input type=button value="Quadrat von 6 errechnen" onClick="Quadrat(6)">
    </form>
    </body>
    </html>

### Beispiel (separate JavaScript-Datei):

     function Quadrat(Zahl)
      {
       Ergebnis = Zahl * Zahl;
       alert("Das Quadrat von " + Zahl + " = " + Ergebnis);
      }

### Erläuterung:

Das Beispiel tut das gleiche wie das Beispiel im Abschnitt zuvor. Der Unterschied ist lediglich, daß der JavaScript-Code in einer separaten Datei steht. Dazu notieren Sie im einleitenden `<script>`-Tag die Angabe `src=` (src = source = Quelle). Dahinter folgt, in Anführungszeichen, der Name der separaten Datei mit dem Quellcode. Ebenfalls notieren sollten Sie die Angabe zum Mime-Type der eingebundenen Datei. Mit `type="text/javascript"` bestimmen Sie den Mime-Type für JavaScript-Dateien.

Die Datei mit dem Quellcode muß eine reine ASCII-Datei sein und sollte die Dateinamenerweiterung `.js` erhalten. Die Datei sollte nichts anderes als JavaScript-Code enthalten.

Beim Referenzieren von separaten JavaScript-Dateien, die sich in anderen Verzeichnissen oder auf anderen Server-Rechnern im Internet befinden, gelten die gleichen Regeln wie beim Einbinden von Grafiken.

### Beachten Sie:

Es kann passieren, daß ein JavaScript, das in einer separaten Datei notiert ist, lokal wunderbar funktioniert, aber nach dem Hochladen der Dateien auf einen WWW-Server plötzlich nicht mehr. Bitten Sie in diesem Fall den Provider oder Webmaster des Servers, den Mime-Type `text/javascript` für Dateien mit der Endung `.js` in die Konfiguration des Web-Servers mit aufzunehmen.

weiter: | Allgemeine Notationsregeln
zurück: | Cursor und Microsoft-Spezialfilter

SELFHTML/Quickbar JavaScript

© 1998 Stefan Münz, muenz@csi.com