Diese Seiten sind Teil von Bachsau’s Archiv.
Die hier beschriebenen Praktiken entsprechen nicht mehr dem Stand der Technik!
Bitte nutzen Sie für aktuelle Projekte das fortlaufend aktualisierte SELFHTML-Wiki.

SELFHTML

Einführung in JavaScript und DOM

Informationsseite

nach unten JavaScript und HTML
nach unten Standards, Sprachvarianten und Sprachversionen
nach unten Hinweise für die Praxis
nach unten JavaScript-Bereiche in HTML definieren
nach unten Bereiche definieren, die bei abgeschaltetem JavaScript angezeigt werden
nach unten JavaScript-Anweisungen in HTML-Tags
nach unten JavaScript in separaten Dateien

 nach unten 

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 Web-Seiten optimieren lassen.

JavaScripts werden wahlweise direkt in der HTML-Datei oder in separaten Dateien notiert. Sie werden zur Laufzeit vom Web-Browser interpretiert. Dazu besitzen moderne Web-Browser entsprechende Interpreter-Software.

Ein paar praktische Beispiele für die Anwendung von JavaScript können Sie in diesem Dokument zur Einstimmung auf JavaScript ausprobieren. So sind beispielsweise die Kapitel kleinen Helferlein JavaScript-Anwendungen, ebenso die Seite Quickbar und die Seite Suche. Letztere ist allerdings eine ziemlich anspruchsvolle Anwendung, die schon weit über das Maß dessen hinausgeht, wofür JavaScript üblicherweise eingesetzt wird.

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 Lernprozess, 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 Web-Seite.

JavaScript läuft in einer so genannten "Sandbox". Das ist eine Art Sicherheitskäfig, in dem die Programmiersprache eingesperrt ist. Sie wird dabei um typische Möglichkeiten anderer Programmiersprachen beschnitten, vor allem um die Möglichkeit, beliebig Daten aus Dateien zu lesen und in Dateien schreiben zu können. So soll verhindert werden, dass JavaScript-Programmierer auf den Rechnern von Anwendern, die eine JavaScript-unterstützte Web-Seite aufrufen, Unfug treiben können. Nach einigen Anfangsproblemen in der Vergangenheit funktioniert das mittlerweile auch ganz gut. Wer also JavaScript in seinem Browser deaktiviert aus Angst, dass seine Festplatte damit formatiert werden könnte, sollte sich am besten ganz vom Internet fernhalten, denn schon beim Abruf von E-Mails lauern Gefahren, die wesentlich größer sind als diejenigen, die von JavaScript ausgehen. Doch leider gibt es andere gute Gründe, die nicht wenige Anwender dazu veranlassen, JavaScript in ihrem Browser abzuschalten. Dazu gehören vor allem die "Nervereien" mancher Programmierhelden, die meinen, eine Web-Seite sei um so toller, je mehr sie den Anwender gängelt. Da wird dann beispielsweise mit JavaScript die Unterstützung der rechten Maustaste abgewürgt, der Anwender kann die aufgerufene Seite nicht mehr verlassen und allerlei mehr. Solche Hirngeburten kontrollgeiler Programmierer sind das eigentliche Übel und der Grund, warum JavaScript nicht bei allen Anwendern beliebt ist. Wer JavaScript einsetzt, sollte sich darüber im klaren sein und die Möglichkeiten der Sprache so einsetzen, dass der Anwender einen Mehrwert davon hat, und nicht so, dass ihm etwas genommen wird.

Bevor Sie sich also in die Tiefen von JavaScript stürzen, sollten Sie sich bewusst gemacht haben, dass JavaScript wirklich nur als Ergänzung zu normalem HTML gedacht ist, aber nicht als dessen Ersatz. Es ist zwar durchaus möglich, Web-Seiten ausschließlich in JavaScript zu programmieren, sodass man kaum mehr davon reden kann, dass JavaScript in HTML eingebettet ist, sondern eher davon, dass der HTML-Code der Seite mit Hilfe von JavaScript dynamisch erzeugt wird. Doch solche Seiten funktionieren nur dort, wo JavaScript im Browser aktiviert ist, und wo der Browser all das versteht, was Sie programmiert haben (ansonsten endet der Versuch, die Seite anzuzeigen, sehr schnell in einer nüchternen Fehlermeldung). Für Web-Seiten, bei denen Information im Vordergrund steht, und die auch von Suchmaschinen-Robots und Benutzerrandgruppen wie Sehbehinderten erfasst werden sollen, müssen Sie darauf achten, JavaScript nur so einzusetzen, dass die Web-Seiten auch ohne eingeschaltetes JavaScript ordentlich angezeigt werden, und dass die Navigation zwischen den Seiten auch ohne JavaScript funktioniert.

nach obennach unten

Standards, Sprachvarianten und Sprachversionen

JavaScript ist eine Sprache, die 1995 von Netscape eingeführt und lizenziert wurde. Es war also eine firmeneigene, proprietäre Angelegenheit, und Netscape diktierte, woraus das "offizielle" JavaScript bestand. Mittlerweile ist die Situation aus verschiedenen Gründen unübersichtlicher geworden - aber JavaScript gibt es nach wie vor und es erfreut sich bei Web-Seiten-Gestaltern großer Beliebtheit.

Netscape versuchte schon frühzeitig, JavaScript nicht als willkürliche Eigenentwicklung dastehen zu lassen, sondern der Sprache den Charakter eines Standards zu verleihen. Dazu spannte man die Organisation englischsprachige Seite ECMA (European Computer Manufacturers Association) ein. Unter dem Namen ECMAScript wurden die Grundlagen von JavaScript als Industriestandard deklariert. In der Spezifikation englischsprachige Seite "ECMA-262" wurde dieser Standard festgeschrieben.

Microsoft konterte auf seine Weise. Der Internet Explorer interpretiert zwar JavaScript, daneben aber auch die Microsoft-eigene Sprachvariante JScript. Diese Sprache implementierte Microsoft nicht zuletzt, um sich aus den Lizenzvorgaben von Netscape herauszuwinden und das, was bei Netscape unter JavaScript lief, selbständig erweitern zu können. JScript umfasst die ganze Palette von JavaScript, doch daneben auch noch etliche spezielle Befehle für den Zugriff auf das Dateisystem und Betriebssystem Windows (das Ganze bezeichnet Microsoft als "Windows Scripting Host"). JScript ist insgesamt also viel mächtiger als JavaScript, doch es ist auch für andere Aufgaben gedacht. Es hat eine ganz eigene Versionenpolitik, die nichts mit der von JavaScript gemein hat. Bekannter als die JScript-Versionen sind jedoch nach wie vor die JavaScript-Versionen, und wenn Sie JavaScript verwenden, geben Sie in der Regel auch "JavaScript" als Sprache an und nicht "JScript". Der Internet Explorer kommt damit klar.

Netscape 2.0 interpretiert den seinerzeit eingeführten JavaScript-Sprachstandard 1.0 (Ende 1995). Der Internet Explorer versteht diesen Sprachstandard weitgehend seit der Version 3.0 (1996).
Netscape interpretiert seit Version 3.0 den JavaScript-Standard 1.1 (ebenfalls 1996). Der Internet Explorer interpretiert diesen Sprachumfang von JavaScript weitgehend seit der Produktversion 4.0 (1997).
Netscape interpretiert seit Version 4.0 den JavaScript-Standard 1.2 (1997). Einige Befehle dieser Sprachversion werden auch vom Internet Explorer seit Version 4.0 interpretiert.
Die JavaScript-Version 1.3 ist in Netscape in den heute am meisten verbreiteten Netscape-Versionen 4.06 bis 4.7 implementiert (1998-2001). Der Internet Explorer versteht diese Sprachversion weitgehend seit Produktversion 5.0.
In die völlig neu programmierte Netscape-Version 6.0 wurde eine Version 1.5 von JavaScript integriert (2000-2001), die neben einigen wenigen JavaScript-eigenen Neuerungen vor allem das Document Object Model (DOM) umsetzt - mehr dazu weiter unten.
Beim Internet Explorer gibt es zum Teil nicht ganz unbeträchtliche Unterschiede, was die Editionen für die einzelnen Plattformen betrifft. So kann es durchaus sein, dass die Windows-Version eines Internet Explorers mit der Produktversion 5.5 JavaScript-Befehle versteht, die eine Macintosh-Ausgabe mit gleicher Produktversionsnummer nicht versteht. Dazu kommen andere Browser-Produkte, die ebenfalls JavaScript implementiert haben, wie beispielsweise Opera, wobei auch dort jede Produktversion wieder ein bisschen mehr JavaScript kann als die Vorgängerversion. In der Praxis ist eigentlich nicht mehr wirklich nachvollziehbar, was nun welcher Browser genau kann. Es ist deshalb ratsam, benutzte Sprachbestandteile von JavaScript-Versionen jenseits der Version 1.2 besonders sorgfältig zu testen.

Das Gerangel zwischen Netscape und Microsoft um die bessere JavaScript-Unterstützung bewirkte auf jeden Fall eine Menge Frustration bei Web-Programmierern und Anwendern. Viele Dinge mussten und müssen immer noch ziemlich umständlich programmiert werden, weil die Fähigkeiten und Eigenheiten der verschiedenen JavaScript-Interpreter der verschiedenen Browser und Browser-Versionen lauter Wenns und Abers erfordern, was sich im Quellcode von JavaScript niederschlägt. Vor allem bei komplexeren JavaScript-Anwendungen, etwa bei Kapitel dynamischem HTML, wurde das "doppelte Programmieren" zur lästigen Pflicht.

Um diesem Missstand auf Dauer abzuhelfen, wurde das W3-Konsortium eingeschaltet, damit eine allgemeine Sprachnorm entsteht. Das W3-Konsortium erarbeitete dabei jedoch keinen konkreten JavaScript-Standard, sondern ein allgemeines Modell für Objekte eines Dokuments. Dieses Modell sollte eine Script-Sprache, die sich als Ergänzungssprache zu Auszeichnungssprachen wie HTML versteht, vollständig umsetzen. Vom W3-Konsortium erhielt das Modell die Bezeichnung Document Object Model (DOM). Am 1. Oktober 1998 wurde das DOM eine offizielle W3-Empfehlung (recommendation) in der Version 1.0, die seit dem 29. September 2000 in einer zweiten Ausgabe vorliegt. Seit 13. November 2000 ist die Version 2.0 des DOM eine offizielle W3-Empfehlung. Das entsprechende Dokument ist jedoch aufgesplittet in mehrere Einzeldokumente. Version 3.0 ist in Arbeit.

Der Internet Explorer 5.0 unterstützt einiges von DOM 1.0, die Version 5.5 schon mehr, ebenso wie Netscape 6. Die JavaScript-Version, die DOM erstmals umsetzt, ist die Version 1.5.

Ein wichtiger Aspekt des DOM ist, dass es nicht nur für HTML ergänzende Script-Sprachen konzipiert ist, sondern auch für Script-Sprachen, die jegliche Kapitel XML-gerechte Auszeichnungssprache erweitern sollen. Das DOM orientiert sich daher in seinem Kern nicht mehr an bestimmten HTML-Elementen. Stattdessen geht es in abstrakter Weise von einem "Dokument" aus (das in XHTML geschrieben sein kann, aber auch in einer anderen XML-basierten Sprache). Es definiert, wie sich auf die einzelnen Elemente dieses Dokuments zugreifen lässt und welche Manipulationsmöglichkeiten es gibt. Da man aber bei der Entwicklung des DOM auch auf die Gegebenheiten und die Verbreitung von HTML und JavaScript Rücksicht nehmen wollte, wurde dem so genannten "Kern-DOM" ein "HTML-Anwendungs-DOM" zur Seite gestellt. Letzteres versucht, Teile des "gewachsenen" JavaScript und MS-JScript zu sanktionieren und Bestandteile des "Kern-DOM" darin zu integrieren.

DOM 1.0 grenzt jedoch noch einige wichtige Aspekte aus, wie etwa das Event-Handling (Behandlung von Anwenderereignissen wie Mausklicks, Tastatureingaben usw.) oder die Integration von Stylesheets in das, was Programmierer dynamisch verändern können. In den Versionen 2.0 und 3.0 behandelt das DOM auch diese Aspekte.

Über die englischsprachige Seite W3-Einstiegsseite zum DOM können Sie die aktuelle Weiterentwicklung des Document Object Models beim W3-Konsortium verfolgen.

Seit das DOM vorliegt, überbieten sich die Browser-Anbieter gegenseitig mit Versprechungen, die Vorgaben des DOM in JavaScript umzusetzen. Abgesehen davon, dass es noch immer Uneinheitlichkeiten bei der Umsetzung gibt, ähnlich wie in HTML und CSS, haben JavaScript-Programmierer nun ein zusätzliches Problem: Wo sie zunächst häufig eine Doppellösung für die beiden verbreitetsten Browser-Typen benötigten, müssen sie nun manchmal sogar drei Lösungen programmieren, wenn sie nämlich Rücksicht auf die 4er-Versionen von Netscape und Internet Explorer Rücksicht nehmen und gleichzeitig DOM-gerecht programmieren wollen.

In der Praxis von JavaScript auf HTML-basierten Web-Seiten ist es jedoch so, dass meistens noch mit den herkömmlichen, von Netscape eingeführten JavaScript-Objekten gearbeitet wird. In Zukunft ist allerdings zu hoffen, dass die DOM-gerechte JavaScript-Programmierung das klassische JavaScript verdrängen wird.
Zur Kennzeichnung der Sprachversionen von JavaScript und von DOM werden in der vorliegenden Dokumentation folgende Symbole verwendet:

Symbol Bedeutung
JavaScript 1.0 Bestandteil der ersten JavaScript-Version.
JavaScript 1.1 Bestandteil der JavaScript-Version 1.1.
JavaScript 1.2 Bestandteil der JavaScript-Version 1.2.
JavaScript 1.3 Bestandteil der JavaScript-Version 1.3.
JavaScript 1.5 Bestandteil der JavaScript-Version 1.5.
MS JScript Von Microsoft eingeführter Sprachbestandteil. Solche Bestandteile werden in der Regel nur vom Internet Explorer ab V4.x interpretiert; es wurden nur einige wichtige solcher Elemente in die Kapitel Objektreferenz mit aufgenommen, nämlich solche, die eine Grundlage für Dynamisches HTML nach dem Ansatz des Internet Explorers ab V4.0 darstellen.
DOM 1.0 Objekt, Eigenschaft oder Methode nach den Vorgaben des Document Object Models, Version 1.0. Kommt innerhalb der vorliegenden Dokumentation in der Kapitel Objektreferenz vor, um Objekte, Eigenschaften und Methoden auszuzeichnen.
DOM 2.0 Objekt, Eigenschaft oder Methode nach den Vorgaben des Document Object Models, Version 2.0. Kommt innerhalb der vorliegenden Dokumentation in der Kapitel Objektreferenz vor, um Objekte, Eigenschaften und Methoden auszuzeichnen.
 

nach obennach unten

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, dass 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 Kapitel CGI lösen! JavaScripts werden im Browser des Anwenders ausgeführt, nicht auf dem Server, wo die Web-Seiten abgelegt sind. Das heißt, JavaScript kann vom Browser erst dann ausgeführt werden, wenn er eine Web-Seite gerade einliest oder nachdem er sie eingelesen hat - dann z.B. auch ausgelöst durch Benutzerereignisse wie Mausklicks usw.

Aus diesem Grund können Sie mit JavaScript also keine Anwendungen wie Gästebücher oder Web-Foren programmieren. Denn solche Anwendungen müssen die Daten aller beitragenden Anwender zentral auf dem Server speichern. Wohl aber kann JavaScript unterstützend eingesetzt werden bei solchen Anwendungen. So ist es beispielsweise sinnvoll, Formulareingaben des Anwenders vor dem Absenden mit Hilfe von JavaScript zu überprüfen und Probleme dem Anwender direkt mitzuteilen. Der Server muss aber selbstverständlich alle Formulardaten selbst noch einmal prüfen - JavaScript könnte ja auch abgeschaltet sein, oder man könnte manipulierte Formulare versenden.

Wenn Sie etwas mit JavaScript lösen möchten, lohnt es sich durchaus, sich im Web umzusehen, 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 im Einsatz 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. Bei vorhandenen JavaScripts müssen Sie allerdings so viel von der Sprache verstehen, dass Sie genau wissen, welche Variablen oder festen Werte Sie verändern oder welche Funktion Sie ergänzen wollen.

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie Links zu Anbietern frei verfügbarer JavaScripts:

Online-Seite WWW-Links: JavaScript und DOM

Wenn Sie JavaScript auf eigenen Web-Seiten verwenden wollen, sollten Sie auf jeden Fall mehrere Browser zum Testen einsetzen. Denn leider sind die JavaScript-Interpreter der JavaScript-fähigen WWW-Browser wie schon erwähnt sehr unterschiedlich in ihrer Leistung.

Stellen Sie keine Web-Seiten mit ungeprüftem JavaScript-Code öffentlich zur Verfügung. 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 Web-Browsers oder gar einen Systemabsturz hat, was bei Online-Sitzungen besonders unangenehm ist. Solche Anwender besuchen Ihre Seiten mit Sicherheit so schnell nicht wieder.

nach obennach unten

JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 JavaScript-Bereiche in HTML definieren

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

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head><title>Test</title>
<script type="text/javascript">
alert("Hallo Welt!");
</script>
</head>
<body>
</body>
</html>

Erläuterung

Mit <script type="text/javascript"> leiten Sie einen Bereich für JavaScript innerhalb einer HTML-Datei ein (script = Quelltext, type = Seite MIME-Typ). Die Angabe zum MIME-Typ ist seit HTML 4.0 Pflicht. Mit type="text/javascript" geben Sie den MIME-Typ für JavaScript-Dateien an. Der MIME-Typ text/javascript ist zwar erst seit kurzem offiziell registriert, wird aber von allen JavaScript-fähigen Browsern schon seit langer Zeit unterstützt. Der MIME-Typ text/javascript ist zwar mittlerweile obsolet, wird aber von allen JavaScript-fähigen Browsern schon seit langer Zeit unterstützt. In der Zukunft soll der neue MIME-Typ application/javascript verwendet werden. Dieser ist erst seit kurzem offiziell registriert und daher den meisten Browsern allerdings noch unbekannt.

Zusätzlich können Sie zur Kennzeichnung der JavaScript-Sprachversion das language-Attribut verwenden, z.B. language="JavaScript" oder language="JavaScript1.2". Die Versionsangabe 1.2 sollte dazu führen, dass nur diejenigen Browser den JavaScript-Bereich interpretieren, welche den Sprachstandard JavaScript 1.2 unterstützen. Dadurch lassen sich Fähigkeiten nutzen, die erst ab dieser Version zur Verfügung stehen. Jedoch gehört dieses Attribut zu den Seite missbilligten Attributen und wird nicht von allen Browsern korrekt interpretiert. Eine zuverlässigere Weise, um manche Browser gezielt am Ausführen eines bestimmten JavaScript-Codes zu hindern, ist die Seite Abfrage, ob ein Objekt existiert.

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

Beachten Sie:

Es gibt keine festen Vorschriften dafür, an welcher Stelle einer HTML-Datei ein JavaScript-Bereich definiert werden muss. 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, dass 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 Seite 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.

Gewisse besonders alte Browser, zum Beispiel Netscape 1 und Internet Explorer 2, wissen nichts von JavaScript und kennen daher das script-Element nicht. Wenn diese Browser auf einen JavaScript-Bereich treffen, stellen sie irrtümlicherweise dessen Inhalt so dar, als handelte es sich um normalen Text in der HTML-Datei. Dadurch bekommt der Anwender den Code zu Gesicht. Wenn Sie dies verhindern möchten, sollten Sie den JavaScript-Code zwischen <script type="text/javascript"> und </script> in einen Seite HTML-Kommentar einschließen. In der Zeile nach dem Start-Tag öffnen Sie den Kommentar mit <!--. In der Zeile vor dem End-Tag des JavaScript-Bereich notieren Sie einen einzeiligen Seite JavaScript-Kommentar //, gefolgt vom schließenden HTML-Kommentar -->.

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

Obwohl dieses Auskommentieren des JavaScript-Codes eine gängige Praxis ist, wird in den Codebeispielen in SELFHTML darauf verzichtet. Denn die Browser aus den Anfangstagen des Webs, die JavaScript-Bereiche nicht erkennen können, sind weitestgehend zu vernachlässigen. Beachten Sie in diesem Zusammenhang die Seite Unterschiede zwischen XHTML und HTML.

nach obennach unten

HTML 4.0XHTML 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 Bereiche definieren, die bei abgeschaltetem JavaScript angezeigt werden

Mit dem HTML-Element <noscript> können Sie Bereiche definieren, die angezeigt werden, wenn JavaScript deaktiviert ist. Die Beschreibung dazu befindet sich im HTML-Bereich: Seite Noscript-Bereich definieren

nach obennach unten

JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 JavaScript-Anweisungen 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 so genannte Seite Event-Handler. Das sind Attribute in HTML-Tags, über die sich JavaScripts aktivieren lassen. Für jeden der möglichen Event-Handler ist festgelegt, in welchen HTML-Tags er vorkommen darf.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function Quadrat() {
   var Ergebnis = document.Formular.Eingabe.value * document.Formular.Eingabe.value;
   alert("Das Quadrat von " + document.Formular.Eingabe.value + " = " + Ergebnis);
}
//-->
</script>
</head>
<body>
<form name="Formular" action="">
<input type="text" name="Eingabe" size="3">
<input type="button" value="Quadrat errechnen" onclick="Quadrat()">
</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 Seite selbst definierte Funktion, die Funktion mit dem Namen Quadrat(). Die Funktion errechnet das Quadrat einer Zahl, die der Anwender in dem weiter unten notierten Formular im Eingabefeld mit dem Namen Eingabe eingibt. Der JavaScript-Code dieser Funktion wird aber nicht automatisch ausgeführt, sondern nur dann, wenn die Funktion explizit aufgerufen wird. Im obigen Beispiel erfolgt der Aufruf mit Hilfe eines Seite Klick-Buttons. Wenn der Anwender auf den Button klickt, wird das Quadrat der eingegebenen Zahl ausgegeben. Dazu ist im HTML-Tag des Klick-Buttons das Attribut onclick notiert - ein Event-Handler mit der Bedeutung "beim Anklicken".

Beachten Sie:

Im Abschnitt Seite Event-Handler wird beschrieben, welche Event-Handler es außer onclick noch gibt, und in welchen HTML-Tags sie vorkommen dürfen.

nach obennach unten

JavaScript 1.1Netscape 3.0MS IE 4.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 JavaScript in separaten Dateien

Seit der Sprachversion 1.1 von JavaScript (und auch seit HTML 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 zu notieren und können ihn in mehreren HTML-Dateien referenzieren. JavaScript-Code zwischen den <script>-Tags wird in diesem Falle ignoriert.

Beispiel: JavaScript-Datei quadrat.js

function Quadrat() {
   var Ergebnis = document.Formular.Eingabe.value * document.Formular.Eingabe.value;
   alert("Das Quadrat von " + document.Formular.Eingabe.value + " = " + Ergebnis);
   }

Beispiel: HTML-Datei

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>JavaScript-Test</title>
<script src="quadrat.js" type="text/javascript"></script>
</head>
<body>
<form name="Formular" action="">
<input type="text" name="Eingabe" size="3">
<input type="button" value="Quadrat errechnen" onclick="Quadrat()">
</form>
</body>
</html>

Erläuterung

Hier handelt es sich um das gleiche Beispiel wie im nach oben Abschnitt zuvor. Der Unterschied ist lediglich, dass der JavaScript-Code in einer separaten Datei steht. Dazu notieren Sie im einleitenden <script>-Tag das Attribut src (src = source = Quelle). Als Wert weisen Sie den URI der separaten Datei mit dem Quellcode zu. Dabei gelten die Regeln zum Seite Referenzieren in HTML.

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

Beachten Sie:

Es kann passieren, dass 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-Typ text/javascript für Dateien mit der Endung .js in die Konfiguration des Web-Servers mit aufzunehmen. Ansonsten können Sie im einleitenden <script>-Tag beim type-Attribut auch mal den MIME-Typ application/x-javascript anstelle von text/javascript ausprobieren. Bei einigen Servern funktioniert es dann.

 nach oben
weiter Seite Allgemeine Regeln für JavaScript
zurück Seite XPath-Funktionen
 

© 2007 Seite Impressum

Originaladresse dieses Dokuments: http://de.selfhtml.org/javascript/intro.htm