SELFHTML/Navigationshilfen JavaScript/DOM | SELFHTML/Navigationshilfen JavaScript/DOM |
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 
kleinen Helferlein JavaScript-Anwendungen, ebenso die 
Quickbar und die Suche. Letztere ist allerdings eine ziemlich anspruchsvolle Anwendung, die schon weit über das übliche Maß dessen hinausgeht, wie 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 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 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 auch darüber bewusst sein, dass JavaScript wirklich nur als Ergänzug zu normalem HTML gedacht ist, aber nicht als dessen Ersatz. Es ist zwar durchaus möglich, Web-Seiten ausschließlich in JavaScript zu programmieren, so dass 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.
 
|
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 erfreut sich bei Webseiten-Gestaltern großer Beliebtheit.
Netscape versuchte schon frühzeitig, JavaScript nicht als willkürliche Eigenentwicklung dastehen zu lassen, sondern ihm der Sprache den Charakter eines Standards zu verleihen. Dazu spannte man die Organisation 
EMCA (European Computer Manufacturers Association) ein. Unter dem Namen ECMAScript ließ sich Netscape von dieser Organisation JavaScript als Industriestandard deklarieren. In der Spezifikation "ECMA-262" wurde dieser Standard festgeschrieben.
Microsoft konterte auf seine Weise. Der MS 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 MS 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 MS 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 MS 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 den 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 bischen 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 V1.2 besonders sorgfältig zu testen.
Das Gerangel zwischen Netscape und Microsoft um die bessere JavaScript-Unterstützung bewirkte auf jeden Fall eine Menge Frustation 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 dynamischem HTML, wurde das "Doppeltprogrammieren" 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 Scriptsprache, 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 MS Internet 5.0 unterstützt einiges von von DOM 1.0, die Version 5.5 schon mehr, ebenso wie Netscape 6.x. 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 Scriptsprachen konzipiert ist, sondern auch für Scriptsprachen, die jegliche 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 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 Browsertypen 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 und 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:
|
|
|
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 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 sinnvoller, Formulareingaben des Anwenders vor dem Absenden mit Hilfe von JavaScript zu überprüfen, als den Server-Rechner mit dieser Arbeit zusätzlich zu belasten.
Wenn Sie etwas mit JavaScript lösen möchten, lohnt es sich durchaus, sich im Web 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 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 Linkverzeichnis des Online-Angebots von SELFHTML aktuell finden Sie Links zu Anbietern frei verfügbarer JavaScripts:
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.
|
|
JavaScript-Bereiche in HTML definierenFür JavaScript-Programmabschnitte können Sie in HTML Bereiche definieren.
Anzeigebeispiel: So sieht's aus
<html>
<head><title>Test</title>
<script type="text/javascript">
<!--
alert("Hallo Welt!");
//-->
</script>
</head>
<body>
</body>
</html>
|
Mit <script type="text/javascript"> leiten Sie einen Bereich für JavaScript innerhalb einer HTML-Datei ein (script = Quelltext, type = Mimetype). Die Angabe zum Mimetype ist seit HTML4.0 Pflicht. Mit type="text/javascript" bestimmen Sie den typischen Mime-Type für JavaScript-Dateien.
Zusätzlich können Sie zur Kennzeichnung der JavaScript-Sprachversion das language-Attribut verwenden (z.B. language="JavaScript" oder language="JavaScript1.2"). Jedoch gehört dieses Attribut zu den missbilligten Attributen und wird auch nicht von allen Browsern korrekt interpretiert.
Dahinter - am besten in der nächsten Zeile - sollten Sie mit <!-- einen HTML-Kommentar einleiten. Dadurch erreichen Sie, dass ä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.
Den JavaScript-Bereich schließen Sie mit einem einzeiligen JavaScript-Kommentar //, gefolgt vom schließenden HTML-Kommentar --> und </script> ab. Der JavaScript-Kommentar ist erforderlich, um Fehlermeldungen in scriptfähigen Browsern zu unterdrücken. Berücksichtigen Sie, dass vor und nach dem HTML-Kommentar ein Zeilenumbruch zwingend erforderlich ist.
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 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-Anweisungen in HTML-TagsJavaScript 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 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.
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>
|
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(). 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 Klick-Buttons. Wenn der Anwender auf den Button klickt, wird das Quadrat zur eingegebenen Zahl ausgegeben. Dazu ist im HTML-Tag des Klick-Buttons das Attribut onClick= notiert - ein Event-Handler mit der Bedeutung "beim Anklicken".
Im Abschnitt Event-Handler wird beschrieben, welche Event-Handler es außer onClick= noch gibt, und in welchen HTML-Tags sie vorkommen dürfen.
|
|
JavaScript in separaten DateienSeit 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 notieren und können ihn in mehreren HTML-Dateien referenzieren.
function Quadrat() {
var Ergebnis = document.Formular.Eingabe.value * document.Formular.Eingabe.value;
alert("Das Quadrat von " + document.Formular.Eingabe.value + " = " + Ergebnis);
}
|
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> |
Hier handelt es sich um das gleiche Beispiel wie im Abschnitt zuvor. Der Unterschied ist lediglich, dass der JavaScript-Code in einer separaten Datei steht. Dazu notieren Sie im einleitenden <script>-Tag die Angabe src= (src = source = Quelle). Als Wert weisen Sie den URI der separaten Datei mit dem Quellcode zu. Dabei gelten die Regeln zum 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.
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-Type 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 Mimetype application/x-javascript anstelle von text/javascript ausprobieren. Bei einigen Servern funktioniert es dann.
|
| |
 |
Allgemeine Regeln für JavaScript
|
 |
XPath-Funktionen
|
| SELFHTML/Navigationshilfen JavaScript/DOM |
© 2001 
selfhtml@teamone.de
