2 Clientseitiges JavaScript

JavaScript
2
Clientseitiges JavaScript
2.1
Übersicht
2.1.1
Was ist JavaScript?
JavaScript ist eine schlanke, interpretierte Programmiersprache, bereichert um einige
objektorientierte bzw. objektbasierte Fähigkeiten. Die Sprache ist integriert in Webbrowsern wie Netscape Navigator und Microsoft Internet Explorer. (Sie kann aber auch in
Webservern integriert sein, z.B. als JScript im Internet Information Server.) Die
JavaScript-Objekte repräsentieren das Browserfenster und seinen Inhalt, also nicht nur
das Dokumentenfenster selbst (document), sondern auch Browserkomponenten wie den
Aufzeichnungspfad (history), Plugins (plugins[]) und das URL-Eingabefeld (location). Clientseitige JavaScript-Programme sind in HTML eingebettet, und damit erlaubt
eine solche HTML-Seite Dialoge mit dem Nutzer. Die Programme haben begrenzte Kontrolle über den Browser und können dynamisch neue HTML-Inhalte generieren. Urheber
dieser Sprache ist Netscape.
Wie JavaScript-Programme in HTML eingebettet sind, ist in dem folgenden „Hello
World!“-Beispiel gezeigt:
Beispiel 2-1: „Hello World!“ in JavaScript
<!-- ./grundlagen/helloworld.html -->
<H1>
<SCRIPT Language=JavaScript>
document.write("<I>Hello World!</I>");
</SCRIPT>
</H1>
Die Programmzeile
document.write("<I>Hello World!</I>");
42
2 Clientseitiges JavaScript
ist Inhalt des HTML-Markups <SCRIPT>...</SCRIPT>.
Syntaktisch ist JavaScript an C/C++ angelehnt, was besonders bei den Steueranweisungen und den Operatoren wie ++, && oder ?: ins Auge fällt, und womit die Ähnlichkeit
aber auch fast schon endet. So ist JavaScript nicht bzw. nur schwach typisiert und Objekte
in JavaScript sind eher verwandt mit den assoziativen Arrays Perls als mit Objekten in
C++. Inspiriert ist sie mindestens ebenso von der Sprache Perl, u.a. durch die Verwendung
regulärer Ausdrücke bei der Stringmanipulation und durch Analogien bei der Arraybehandlung. Andersartig, ja geradezu exotisch im Vergleich zu Java oder C++ sind Objektorientierung und Vererbungsmechanismen.
2.1.2
Ziele
JavaScript wird als Sprache für die clientseitige Programmierung dynamischer Webauftritte vorgestellt. Als solche ist sie fast ohne Konkurrenz, und im Grunde besteht keine
Wahlmöglichkeit (VBScript ist weitgehend an den Internet Explorer gebunden).
JavaScript dient der Programmierung von Benutzerschnittstellen (GUIs) auf der Basis
von HTML, in das JavaScript-Programme eingebettet sind. In der Regel sind solche Programme ereignisgesteuert, d.h. sie reagieren beispielsweise auf Mausklicks und Tastatureingaben. Weiter machen sie intensiven Gebrauch von HTML- und Browser-„Objekten“
wie Formularen, Grafiken, Stylesheets, Aufzeichnungen (history) usw.
Ziele sind, entsprechend:
•
•
•
•
in einer knappen, aber umfassenden Vorstellung die Sprache JavaScript zu vermitteln,
d.h. in die Syntax der Sprache, vor allem auch in ihren Variablenbegriff (Zahlen,
Strings, Arrays, Objekte), einzuführen. Die Beispiele sind noch stark an der Sprache
selbst orientiert und weniger an Anwendungen. In diesem eher formalen Teil werden
die Grundlagen für die folgenden JavaScript-Komplexe gelegt.
gründlich in die Ereignisbehandlung als dem Kernstück fast aller JavaScript-Programme einzuführen. Die wichtigsten Ereignistypen werden in vollständigen Programmbeispielen vorgestellt, beispielsweise Knopfdruck, Fokusverlust/-gewinn und
Mausbewegung. Außerdem werden die differierenden „neuen“ Ereignismodelle (ab
Version 1.2) des Navigators und des Internet Explorers als wichtige Gestaltungsgrundlage erarbeitet.
wichtige Browserobjekte wie Frames, Formulare, Bilder, Anker/Links vorzustellen,
vor allem auch solche, die sich dynamisch ein-/ausblenden und bewegen lassen (Stylesheets). Auch hier werden vorzugsweise vollständige Programmbeispiele mit Bezug
zu typischen Anwendungen eingesetzt.
typische Anwendungen in einfachen Beispielen zu zeigen, etwa Eingabeüberprüfungen in Formularen, Datenaustausch zwischen Dokumenten, Verwendung von Tochterfenstern, Animationseffekte bei Mauszeigerbewegungen und Verwendung von
clientseitigen Cookies.
Aussehen und Funktionalität von Webdokumenten, deren Ästhetik und Ergonomie sind
gegenwärtig in überaus großem Maße vom Einsatz clientseitiger JavaScript-Programme
bestimmt. Das Können des Webdesigners zeigt sich demzufolge vor allem auch darin, wie
2.1 Übersicht
43
2.1.3
Was JavaScript kann ...
Im Grunde hat JavaScript die Struktur einer Vielzwecksprache, und als solche ist sie auch
für die Programmierung von Algorithmen beliebiger Art geeignet. Ein- und Ausgaben
sind allerdings an die Möglichkeiten des Browsers gebunden, d.h. Eingaben und Ausgaben geschehen im Regelfalle über HTML-Formulare, sind aber auch in gesonderten Fenstern möglich. Dazu das Beispiel 2-2, in dem die Eingabe über ein so genanntes PromptFenster erfolgt und das Resultat danach im Browserfenster ausgegeben wird:
Beispiel 2-2: Ein- und Ausgaben für ein Rechenprogramm
<!-- ./grundlagen/summe.html -->
<SCRIPT Language=JavaScript>
n = prompt("Anzahl der Summanden", "");
summe = 0; for (i = 1; i <= n; i++) summe += i;
document.write("1 bis " + n + " summiert ergibt " + summe);
</SCRIPT>
Durch Aufruf der Funktion prompt() wird ein Eingabefenster geöffnet. Der Aufbau der
Seite wird dadurch so lange unterbrochen, bis in das Eingabefeld des Fensters die Anzahl
der Summanden eingegeben wurde (Abb. 2-1). Nach Betätigen der Eingabetaste wird der
Seitenaufbau fortgesetzt und insbesondere das Ergebnis der Summenbildung mit
document.write() in dem noch leeren Browserfenster ausgegeben.
Abb. 2-1: Ergebnisse von Beispiel 2-2
Fähigkeiten, die JavaScript als Sprache für Webbrowser auszeichnen, sind etwa:
•
Der Aufbau von HTML-Dokumenten kann über JavaScript-Programme gesteuert
werden. Dazu dienen insbesondere die „Methoden“ document.write() bzw.
document.writeln(), mit denen während des Seitenaufbaues Dokumententeile
JavaScript
er statische HTML-Teile mit dynamischen JavaScript-Versatzstücken so verbindet, dass
daraus ansprechende und funktionsgerechte Webseiten entstehen. Auch auf dem Wege zu
solchen Zielen will dieses Kapitel Grundlagen an die Hand geben.
44
•
•
•
•
•
2 Clientseitiges JavaScript
dynamisch eingefügt werden können. Allerdings sind einmal fertiggestellte Dokumente ziemlich statisch. Ergänzungen und Änderungen können dann nicht mehr ohne
weiteres angebracht werden, es sei denn, das Dokument würde vollständig durch ein
anderes, ergänztes und geändertes, ersetzt. Änderungen inhaltlicher Art sind allenfalls
in Bild- und Formular-Markups möglich, während strukturelle Änderungen im Dokument in Form z.B. neuer Abschnitte oder geänderter Tabellenzellendimensionen oder
veränderter Bildbreiten und -höhen gänzlich ausgeschlossen sind.
Allerdings lassen sich Dokumenteninhalte so vorbereiten, dass auch nach erfolgtem
Dokumentenaufbau dynamische Gestaltungsmöglichkeiten bestehen. Sowohl der
Internet Explorer als auch der Navigator bieten dazu die Mittel über Cascading Style
Sheets (CSS) bzw. Layer an. Damit können Texte und Bilder in unabhängigen Schichten dem Dokument überlagert und dynamisch über dem Dokument ein- und ausgeblendet und verschoben werden (Kontextmenüs, Untermenüs etc.).
JavaScript kann zwar das Dokument, in das es eingebettet ist, nach dessen Aufbau nur
noch wenig verändern. Es kann aber andere Fenster öffnen und sie nach Belieben
gestalten, z.B. als Dialogboxen oder in Frames oder in neuen Browserfenstern.
Über HTML-Formulare besteht die Möglichkeit der Interaktion zwischen Nutzer
einerseits und Server andererseits. Formulareingaben müssen nicht unmittelbar an den
Server weitergegeben werden, sondern können mittels JavaScript auch clientseitig
bearbeitet und angezeigt werden. Solche Bearbeitungen können ganz im Client konzentriert sein und bedürfen keiner Interaktion mit dem Server. Ein JavaScriptTaschenrechner ist ein Beispiel dafür. Mit anderen Bearbeitungsformen wie etwa Gültigkeitsüberprüfungen können Daten für den Weiterversand an einen Webserver so
vorbereitet werden, dass möglichst wenige Rückfragen z.B. infolge fehlerhafter Eingaben erforderlich werden. Beispiele finden sich in Bestellungen, Fragebögen,
Anmeldungen, Gästebüchern u.a.m.
Mittels Cookies kann Browsern ein Gedächtnis gegeben werden, in dem Webdokumente ihre Erinnerungen auch für andere Dokumente hinterlassen können. Bei erneutem Besuch eines solchen Webdokuments kann auf die Cookies zurückgegriffen
werden, z.B. für eine individuelle Begrüßung, um den Zustand wieder herzustellen, als
der letzte Besuch beendet wurde, um das Füllen eines Warenkorbes fortzusetzen usw.
Sie geben insbesondere die Möglichkeit, Einzelvorgänge zu Sitzungen zu verklammern, was beispielsweise erlaubt, Bestellvorgänge abzubrechen und zu einem späterem Zeitpunkt wieder aufzunehmen und zu Ende zu führen.
Mittels Zeitgebern können Vorgänge mit Verzögerungen gestartet bzw. wiederholt
werden oder periodisch bzw. in beliebigen Zeitrastern ablaufen. Dies geschieht mittels
der Methoden setTimeout() und setInterval().
Mittels der einlesbaren Browser-Kenndaten können insbesondere interaktive Webdokumente an den jeweiligen Browser angepasst und Vorgänge entsprechend optimiert
werden.
45
2.1 Übersicht
... und was es nicht kann
Die Verwendung von JavaScript ist an Browser und HTML gebunden. Deshalb fehlen
auch einige Eigenschaften, die man bei „Standalone“- bzw. Vielzwecksprachen sonst
erwarten würde:
•
•
•
•
JavaScript hat keine eigenen Grafikfähigkeiten, die über die Möglichkeiten von
HTML hinausgingen.
Mit JavaScript-Programmen können auf dem Clientcomputer weder Dateien gelesen
noch neue erzeugt noch vorhandene modifiziert oder gar gelöscht werden. Damit wird
verhindert, dass unbekannte Webdokumente über JavaScript-Programme unerwünschte Manipulationen am Clientcomputer vornehmen können. Die einzige Ausnahme sind die so genannten Cookies, mittels derer aus Webdokumenten kontrolliert
eine dem Umfang nach begrenzte Informationsmenge in einer Datei festgelegten
Namens gespeichert werden kann (vgl. 2.7.6).
JavaScript hat keine eigenen Netzwerkfähigkeiten mit der Ausnahme, dass es den
Browser veranlassen kann, URLs unterschiedlichen Typs (http:, mailto:, news:
etc.) zwecks Anzeige zu laden und dass es selbst Formularinhalte an Server schicken
kann.
JavaScript ist der Code von Webdokumenten nicht direkt zugänglich, und zwar weder
der des einbettenden Dokuments noch über eine URL der Inhalt anderer Dokumente.
2.1.5
Versionen
Sowohl der Navigator als auch der Internet Explorer beruhen ab der Version 4 im Wesentlichen auf JavaScript in der Version 1.2. Auf dieser baut das Kapitel entsprechend auf.
Alle Versionen und ihre Verfügbarkeit im Netscape Navigator und im Microsoft Internet
Explorer sind in Tabelle 2-1 aufgeführt.
Tabelle 2-1: JavaScript/JScript- und Browser-Versionen
Netscape Navigator
Version
2
3
4.0 - 4.05
ab 4.06
JavaScript 1.0
JavaScript 1.1
JavaScript 1.2
Microsoft Internet Explorer
Version
2
3
4
--JScript 1 (JavaScript 1.0)
JScript 3 (JavaScript 1.2)
ECMA 262-konform
JavaScript 1.3
ECMA 262-konform
5
JScript 5 (JavaScript 1.3)
Die von Microsoft unterstützte Variante JScript hat andere Versionsnummern als
JavaScript, die Entsprechungen sind gleichfalls in der Tabelle angegeben. Allerdings
muss beachtet werden, dass es keine vollständige Kompatibilität gibt. Neuerdings sind
aber die von Microsoft im Internet Explorer und von Netscape im Navigator unterstützten
JavaScript
2.1.4
46
2 Clientseitiges JavaScript
Implementierungen beide ECMA 262-konform, so dass zumindest eine gemeinsame
Basis besteht. ECMAScript ist von der ECMA (European Computer Manufacturers Association) standardisiertes JavaScript. Eine entsprechende ISO-Norm, ISO 10262, soll bald
folgen.
2.1.6
Einbettungen
Clientseitiges JavaScript ist in HTML eingebettet. Solche JavaScript-Programme können
das Verhalten des Browsers steuern, und sie können mit dem Dokumenteninhalt wechselwirken, d.h. auf einige der HTML-Objekte zugreifen und diese auch – nach vorgegebenen
Regeln – ändern. Die Einbettungen geschehen über eine eigene Auszeichnung SCRIPT,
mittels so genannter Entities, über URL-Typen und über neue Attribute in vielen HTMLAuszeichnungen. Dazu ein Beispiel, das alle Varianten enthält:
Beispiel 2-3: Einbettungen in HTML
<!-- ./grundlagen/einbettungen.html -->
<SCRIPT Language=JavaScript>
breite = 35;
function f(text) {
document.writeln(text);
}
</SCRIPT>
<FORM>
<INPUT Type=text Size=&{breite};><BR>
<INPUT Type=button onclick="confirm('OK drücken!')"
Value=&{s=0; for(i=1; i<=5000; i++) s+=i;};>
</FORM>
<HR Align=left Width=&{10*breite;};>
<A Href="javascript:alert('Hallo!')">Sag’ Hallo</A>
Markup
Entity
Attribut
Entity
Entity
URL
Ergebnisse des Programms sind in der folgenden Abbildung zu sehen.
Abb. 2-2 Drücken auf Schaltfläche „12502500“ (links) und auf Hotspot „Sag’ Hallo“ (rechts)
Alle Varianten der Einbettung werden in den folgenden vier Abschnitten detaillierter vorgestellt.
2.1 Übersicht
2.1.7
47
Die SCRIPT-Auszeichnung
Die Auszeichnung (oder der Markup)
<SCRIPT Language=JavaScript>
document.writeln("<H1>Hello World!</H1>");
</SCRIPT>
Auf zwei SCRIPT-Blöcke verteilt sieht das gleiche Programm dann wie folgt aus:
<SCRIPT Language=JavaScript>
text = "Hello World!";
</SCRIPT>
<H1 Align=center>
<SCRIPT Language=JavaScript>
document.writeln(text);
</SCRIPT>
</H1>
2.1.8
JavaScript-Entities
JavaScript-Entities können als Attributwerte von HTML-Auszeichnungen fast überall in
einem Dokument vorkommen. Zur Kennzeichnung einer Entity werden das KaufmannsUnd &, das Semikolon ; sowie ein geschweiftes Klammernpaar {} verwendet (in HTML
werden & und ; gewöhnlich als Anfangs- und Endezeichen zur Umschreibung von Sonderzeichen und -funktionen eingesetzt, z.B. &uuml;):
&{javascriptProgrammcode};
Das Innere der geschweiften Klammern kann beliebiger JavaScript-Programmcode sein,
z.B. ein Algorithmus zur Berechnung des Wertes in einem Formularfeld
<FORM><INPUT Type=text
Value=&{summe=0; for (i=1; i<=125; i++) summe+=i;};
</FORM>
oder als Länge einer horizontalen Linie
<HR Width=&{summe=0; for (i=1; i<=30; i++) summe+=i;};>
JavaScript
<SCRIPT Language=JavaScriptVersionsnummer> ... </SCRIPT>
umfasst einen in JavaScript geschriebenen Programmblock. Solche Blöcke dürfen in
einem HTML-Dokument nicht nur einmal, sondern es können nach Belieben auch weitere
Blöcke in einem Dokument enthalten sein. Sie werden wie die HTML-Kodierung, in der
sie eingebettet sind, nacheinander abgearbeitet. Bei zwei Blöcken beispielsweise können
im zweiten Block auf Variablen des ersten zugegriffen oder dort Funktionen aufgerufen
werden, aber nicht umgekehrt vom ersten Block aus auf Variablen bzw. Funktionen des
zweiten.
Ein einfaches Programm, die traditionelle Begrüßung des Programmieranfängers mit
„Hello World!“, ist das folgende:
48
2 Clientseitiges JavaScript
In den geschweiften Klammern werden in Schleifen mit deutlichem C/C++-Flair die
Summen aller ganzen Zahlen von 1 bis 125 bzw. 30 berechnet und als Zahlenwerte in der
jeweiligen HTML-Auszeichnung verwendet. Zu interpretieren ist das Programm
summe=0;
for (i=1; i<=30; i++)
summe+=i;
wie folgt:
Mit summe=0 wird die Summenvariable summe initialisiert. Danach wird, mit i=1 beginnend, zu summe der Wert von i addiert und sodann geprüft, ob die Schleifenvariable i
den Wert 30 noch nicht überschritten hat (i<=30). Ist er überschritten, wird die Schleife
abgebrochen. Ist dies aber noch nicht der Fall, wird i um 1 erhöht (i++) und der Vorgang
wiederholt.
2.1.9
Fehlersuche und Programmtest
JavaScript-Programme können auch in eine URL mit dem Protokollbezeichner (URLTyp) javascript: gepackt werden, z.B. in die folgende URL:
javascript:javascriptProgrammcode
Eine solche URL verwenden heißt, dass beim Aktivieren das darin enthaltene JavaScriptProgramm ausgeführt wird. Beispiele sind die folgenden beiden HTML-Anker:
<A Href="javascript:s=0; for (i=0; i<10; i++) s+=i;">Summieren
und ausgeben</A>
<A Href="javascript:alert('Hello World!')">Alarmfenster</A>
Die JavaScript-URLs können auch unmittelbar im Location- bzw. Adressfeld des Browsers eingegeben und ausgeführt werden. Die Ausführung von JavaScript-Programmen im
Location-Feld ist vor allem für Tests vorgesehen.
Eine besondere Bedeutung beim Netscape Navigator hat der Protokollbezeichner
javascript: dann, wenn dem Doppelpunkt keine Anweisungen folgen. Mit seiner Ausführung wird nämlich ein Fenster geöffnet, in dem das JavaScript-Fehlerlogbuch des
Navigators angezeigt wird. Darin sind alle JavaScript-Fehler seit Start des Browsers bzw.
seit dem letzten Löschen des Logbuches festgehalten. Verwendet werden kann es in
einem Ankerelement
<A Href="javascript:">Fehlerlogbuch</A>
oder direkt durch Eintippen in das Location-Eingabefeld des Netscape-Browsers.
Abb. 2-3: Starten der Fehlerlogbuchanzeige im Netscape Navigator
49
JavaScript
2.1 Übersicht
Abb. 2-4: Fehleranzeige
2.1.10 Attribute in HTML-Auszeichnungen
Interaktionen des Nutzers beruhen auf der Möglichkeit, so genannte Ereignisse wie Mausklicks, Texteingaben etc. in JavaScript-Programmen zu behandeln. Aber auch die Möglichkeit, Ereignisse wie den erfolgreichen oder fehlerhaften Abschluss eines Ladevorganges im Internet sowie das Verlassen einer Seite behandeln zu können, ist von einiger
Wichtigkeit für dynamische Webseiten.
JavaScript benutzt für die Ereignisbehandlung so genannte Eventhandler. Eventhandler
sind meist Funktionen, die aufgerufen werden, wenn sich etwas ereignet, z.B. eine Maustaste gedrückt oder ein Wort in ein Textfeld eingegeben wurde.
Ein Eventhandler äußert sich als Attribut in einer HTML-Auszeichnung, dem nach dem
Gleichheitszeichen ein JavaScript-Programm zugeordnet ist. Im folgenden Beispiel ist es
das Attribut oder der Eventhandler onclick in der Auszeichnung für einen Taster (Button), der Teil eines Formulars ist. Bei Klicken auf den Taster wird das JavaScript-Programm nach dem Gleichheitszeichen und dort der Aufruf alert('Hello World!');
ausgeführt.
<FORM Name=meinformular>
<INPUT Type=button onclick="alert('Hello World!');">
</FORM>
Als weiteres Attribut dient Name zur Kennzeichnung bzw. Identifizierung von HTMLAuszeichnungen, insbesondere (aber nicht nur) von Ankern (A), Bildern (IMG), Formularen (FORM) und Formularelementen (INPUT, SELECT etc.).
Namensattribute und Eventhandler waren zunächst JavaScript-Ergänzungen zu HTML,
seit der Version 4 sind sie auch Bestandteile des HTML-Standards.
50
2 Clientseitiges JavaScript
Auch syntaktische Fehler in einem Java-Programm verursachen Ereignisse. Wie ein solches Ereignis behandelt werden kann, zeigt das Beispiel 2-4. Der Eventhandler hängt mit
JavaScript selbst zusammen, entsprechend wird in einem <SCRIPT>-Block und nicht in
einer HTML-Auszeichnung festgelegt, was das Ereignis bewirken soll.
Beispiel 2-4: Syntaktische Fehler anzeigen
<!-- ./grundlagen/onerror.html -->
<SCRIPT Language=JavaScript>
function fehler(msg, url, line) {
alert("Fehler in " + url + "\n\nZeile " + line + ": " + msg);
}
onerror = fehler;
</SCRIPT>
<H2>Test Fehlerereignisse</H2>
<SCRIPT Language = JavaScript>
zahl = 255;
if (zahl <> 5) zahl = 5;
</SCRIPT>
<HR Width=&{variable;};>
// Fehler Zeile 12
<!-- Fehler Zeile 14 -->
In der ersten Hälfte des Programms wird festgelegt, was im Fehlerfall geschehen soll,
nämlich:
1. In der Funktion function fehler(...) werden die in der Klammer mitgeteilten
Daten oder Parameter über Fehlerart (msg), Dokumentenherkunft (url) und Zeilennummer (line) mit alert(...) in einem eigenen Meldefenster ausgegeben.
2. Nach der Zuordnung onerror = fehler führen alle syntaktischen Fehler mittels
dieses Fehlerbehandlungsprogramms zu einer Anzeige.
Im zweiten SCRIPT-Block sind zwei syntaktische Unzulänglichkeiten eingebaut, die entsprechend zwei Fehlerereignisse auslösen. Eines davon ist in Abb. 2-5 als Resultat des
Beispielprogramms gezeigt. Der Navigator erkennt beide Fehler, der Internet Explorer
nur den ersten.
Abb. 2-5: Anzeigefenster (alert()) mit Fehlerhinweis
Es ist sehr sinnvoll, den Behandlungsteil als Datei so zu präparieren, dass er in der Testphase eines JavaScript-Programms leicht eingebunden werden kann. Das Beispiel 2-4
erhält dann die folgende Form:
2.1 Übersicht
51
<!-- ./grundlagen/onerror.js -->
function fehler(msg, url, line) {
alert("Fehler in " + url + "\n\nZeile " + line + ": " + msg);
}
onerror = fehler;
Das JavaScript-Programm kann nun in ein anderes HTML-Dokument eingebunden werden. Die beiden Teile zusammen haben die gleiche Funktion wie Beispiel 2-4.
Beispiel 2-5b: Anwendung des Src-Attributes im SCRIPT-Markup: Bezug auf die Quelldatei
<!-- ./grundlagen/onerrorext.html -->
<SCRIPT Language=JavaScript Src=onerror.js></SCRIPT>
<H2>Test Fehlerereignisse</H2>
<SCRIPT Language=JavaScript>
zahl = 255;
if (zahl <> 5) zahl = 5;
// Fehler Zeile 6
</SCRIPT>
<HR Width=&{variable;};>
<!-- Fehler Zeile 8 -->
2.1.11 Wenn der Browser JavaScript ablehnt ...
Der Fall, dass im Clientbrowser JavaScript abgeschaltet ist, lässt sich mit der NOSCRIPTAuszeichnung berücksichtigen:
<NOSCRIPT> ... </NOSCRIPT>
Alles zwischen den beiden Marken wird dann ausgegeben, um beispielsweise einen
Ersatz für den <SCRIPT>...</SCRIPT>-Teil zu bieten, oder um zumindest darauf aufmerksam zu machen, weshalb etwas nicht so wie vorgesehen funktioniert. Eine vollständige Berücksichtigung aller Fälle, etwa dass der Browser JavaScript nicht mag oder sogar
nicht kennt, ist im folgenden Beispiel zu sehen.
<SCRIPT Language=JavaScript>
<!-JavaScript-Programm
// -->
</SCRIPT>
<NOSCRIPT>
Ersatz für JavaScript-Teil und/oder Hinweise
</NOSCRIPT>
Für den Fall, dass ein Browser die SCRIPT-Auszeichnung nicht kennt, ist das darin enthaltene Programm zusätzlich innerhalb eines HTML-Kommentars (<!-- ... -->)
geschrieben. Damit wird berücksichtigt, dass ein Browser die Marken unbekannter Auszeichnungen einfach ignoriert und den Inhalt zwischen solchen Marken ausgibt. Das ist
JavaScript
Beispiel 2-5a: Anwendung des Src-Attributes im SCRIPT-Markup: Quelldatei
52
2 Clientseitiges JavaScript
unerwünscht bei SCRIPT, weshalb das JavaScript-Programm auskommentiert wird, aber
erwünscht bei NOSCRIPT. Wichtig zu wissen ist noch, dass das Ende des KommentarMarkups (-->) für JavaScript mittels zweier Schrägstriche // auskommentiert ist und
somit nicht zu einem Syntaxfehler führen kann.
2.1.12 Arbeitsmittel
Um in JavaScript zu programmieren, wird zweierlei benötigt:
•
•
ein JavaScript-fähiger Webbrowser, siehe Tabelle 2-1;
ein Texteditor.
JavaScript ist in HTML eingebettet. Es bietet sich daher auch an, statt eines schlichten
Editors HTML-Entwicklungswerkzeuge wie Frontpage oder Arachnophilia zu verwenden. Es sollte aber zuvor unbedingt verifiziert werden, dass das verwendete Werkzeug
selbstständig keinerlei Änderungen an JavaScript-Programmen vornimmt.
2.2
Objekte
Die Arbeitsumgebung von JavaScript ist clientseitig durch einen Webbrowser oder serverseitig durch einen Webserver vertreten. JavaScript nimmt seine Umgebung über
Objekte, die diese repräsentieren, wahr und tritt über diese Objekte mit ihr in Wechselwirkung. Die Objekte beschreiben die Eigenschaften und die Funktionalität z.B. eines
Tasters, eines Auswahlmenüs, der URL-Eingabezeile des Browsers (Location) oder von
Bildern. Die Objekte sind in eine Hierarchie eingeordnet, wie sie in Abb. 2-6 dargestellt
ist.
Das Wurzelobjekt ist das aktuelle Browserfenster selbst (window). Es enthält seinerseits
Objekte, die unter anderem den Navigator beschreiben (navigator), den Aufzeichnungspfad (history) enthalten und das Dokument in der Fenster- oder Framefläche
repräsentieren (document). Das Dokumentenobjekt document wiederum beinhaltet
unter anderem Formulare, Anker und Bilder, das Formular enthält Formularfelder usw.
Die dem Dokument untergeordneten Objekte sind alle auf HTML-Auszeichnungen bezogen; in der gleichen Ebene der Objekthierarchie sind als HTML-Objekte nur noch Frames
zu finden.
Die durchgezogenen Linien in der Abbildung besagen jeweils, dass das Objekt links dasjenige rechts der Linie enthält, also ihm übergeordnet ist (die „has a“-Beziehung der
Objektorientierung). Die gestrichelten Linien nach elements[] symbolisieren, dass die
Objekte radio, button, textarea etc. unterschiedliche Konkretisierungen der Arrayelemente elements[] sind.
Übrigens „sieht“ auch VBScript seine Umgebung in Form von Objekten, die ganz ähnlich
den hier gezeigten sind, d.h. ein ähnliches Objektdiagramm wird auch eine der Grundlagen im nächsten Kapitel sein (ASP, VBScript).
53
2.2 Objekte
DNWXHOOHV
)HQVWHU
SOXJLQV>@
FKHFNER[
ZLQGRZVHOI
SDUHQWWRS
PLPH7\SHV>@
ILOH8SORDG
QDYLJDWRU
OLQNV>@
IUDPHV>@
IUDPH1DPH
IRUPV>@
IRUP1DPH
ORFDWLRQ
LPDJHV>@
LPDJH1DPH
GRFXPHQW
DQFKRUV>@
UHVHW
KLVWRU\
HPEHGV>@
VHOHFW
DSSOHWV>@
DSSOHW1DPH
OD\HUV>@
OD\HU1DPH
H
O
H
P
H
Q
W
V
>@
KLGGHQ
SDVVZRUG
UDGLR
RSWLRQV>@
VXEPLW
WH[W
WH[WDUHD
Abb. 2-6: Beziehungen zwischen den Objekten für clientseitiges JavaScript
JavaScript verfügt ansatzweise auch über einen Klassenbegriff. In diesem Sinne gibt es
eingebaute Klassen und es können eigene Klassen definiert werden, und aus beiden Klassenarten können Objekte instanziiert werden. Zu den „eingebauten“ Klassen gehören u.a.
Array, String, Number und Boolean.
Vor einer genaueren Behandlung von Objekten und ihrer Eigenschaften und Methoden
sowie zu deren besserem Verständnis wird an einem Beispiel gezeigt, was unter Objekten
in JavaScript zu verstehen ist. In JavaScript sind Objekte nämlich assoziative Arrays, d.h.
also Arrays, dessen Elemente über Textschlüssel statt mit ganzen positiven Zahlen adressiert werden.
Zur Erläuterung dient das Programm in Beispiel 2-6.
Es beginnt mit der Definition eines assoziativen Arrays des Namens kreis mit den initialen Schlüssel-/Wertepaaren x:0, y:0, radius:1 und PI:Math.PI. Diese Schreibweise,
nämlich schluessel:wert, bezeichnet Literale für assoziative Arrays. Z.B. ist in dem
Literal x:0 "x" der Schlüssel und "0" der Wert des entsprechenden Arrayelements.
Als Nächstes wird dem Schlüssel "umfang" im Array kreis eine Funktion zur
Umfangsberechnung assoziiert, und danach analog dem Schlüssel "flaeche" eine Flächenberechnung. In der Flächenberechnung wird sowohl die Schreibweise für assoziative
Arrays als auch die für Objekte verwendet, z.B. kreis["radius"] und
kreis.radius.
JavaScript
EXWWRQ
54
2 Clientseitiges JavaScript
Beispiel 2-6: Ein Objekt im Eigenbau
<!-- ./grundlagen/objekteigenbau.html -->
<SCRIPT Language=JavaScript>
kreis = {x:0, y:0, radius:1, PI:Math.PI}
kreis["umfang"] =
function() { return 2 * kreis["PI"] * kreis["radius"]; };
kreis["flaeche"] =
function() { return kreis["PI"] * kreis["radius"]
* kreis.radius; }
document.write("<PRE>");
kreis.radius = 1.0/kreis.PI;
document.writeln("Radius " + kreis.radius);
document.writeln("Umfang " + kreis.umfang());
document.writeln("Fläche " + kreis.flaeche());
</SCRIPT>
Bei der Verwendung des assoziativen Arrays (oder des Objektes) kreis in der zweiten
Hälfte des Programms wird dann nur noch die Objektschreibweise verwendet:
kreis.PI, kreis.radius, kreis.umfang() etc.
(kreis.umfang() könnte sonst auch als kreis["umfang"]() geschrieben werden.)
PI und radius bezeichnen Eigenschaften des Objektes kreis, und umfang() und
flaeche() bezeichnen Methoden. Wie man sehen kann, sind Eigenschaften an Objekte
gebundene Variablen und Methoden an Objekte gebundene Funktionen. Davon handeln
vor allem die beiden folgenden Abschnitte.
2.2.1
Eigenschaften
Eigenschaften sind in assoziativen Arrays enthaltene bzw. an Objekte gebundene Variablen. (Die Begriffe „assoziatives Array“ und „Objekt“ sind, wie im vorangehenden
Abschnitt gezeigt, Synonyme.) In den Eigenschaften eines Objektes kann, wie bei Variablen, jeder Datentyp JavaScripts vertreten sein.
Zugriff
Auf eine Eigenschaft property eines Objektes obj kann mittels des Punktoperators
zugegriffen werden:
obj.property
Ist property selbst ein Objekt, so werden dessen Eigenschaften, z.B. eins und zwei,
durch verkettete Anwendung des Punktoperators verfügbar:
obj.property.eins
bzw.
obj.property.zwei
In dieser Weise wird auch auf Eigenschaften der Objekte in Abb. 2-6 zugegriffen, z.B.
location.href
oder
top.frame[0].window.document.linkColor = red
Das Browserfenster enthält Frames, einer davon (frames[0]) enthält seinerseits ein
Fenster, dieses besteht aus einem Dokument und in diesem Dokument sind alle Textanker
rot gefärbt.
55
2.2 Objekte
Sowohl in Eigenbau- als auch in Browserobjekten lassen sich jederzeit zusätzliche Eigenschaften definieren. Z.B. kann dem aktuellen Webdokumentobjekt document eine
Eigenschaft meineFarbe mit dem Stringwert "knallrot" hinzugefügt werden:
document.meineFarbe = "knallrot";
document.writeln(document.meineFarbe);
// zur Kontrolle
Eigenschaften löschen
Eigenschaften können annulliert werden, und zwar entweder mit dem delete-Operator
delete document.meineFarbe
oder durch Setzen auf den Nullwert null
document.meineFarbe = null;
document.meineFarbe = void 0;
Allerdings entfernt nur der delete-Operator eine Eigenschaft aus dem Objekt, die anderen Verfahren versetzen die Eigenschaft lediglich in den null- oder undefinedZustand, wie man leicht mittels einer for/in-Schleife über die Eigenschaften des Objektes prüfen kann. (Wird mittels des Punktoperators auf eine mittels delete gelöschte oder
mittels void 0-Zuweisung annullierte Eigenschaft zugegriffen, so ergibt sich in diesen
beiden Fällen der Wert undefined.)
Alle Eigenschaften sondieren
Welche Eigenschaften in einem Objekt verfügbar sind, lässt sich in JavaScript mit einem
speziellen Schleifentyp, der for...in-Schleife, bestimmen:
Beispiel 2-7: Die Eigenschaften eines Objektes scannen
<!-- ./grundlagen/objekteigenschaften.html -->
<SCRIPT Language=JavaScript>
document.write("<PRE>");
for (var prop in location) {
var wert = eval("location." + prop); // z.B. location.href
document.writeln(prop + "|" + (typeof wert) + "|" + wert);
}
</SCRIPT>
Der Variablen prop werden in der Schleife nacheinander die Namen aller Eigenschaften
zugewiesen, über diese ihre Werte beschafft und dann zusammen mit dem Eigenschaftstyp ausgegeben. (Statt des Ausdruckes eval("location." + prop) könnte einfacher
auch location[prop] programmiert werden.)
2.2.2
Methoden
Anders als Funktionen wie eval() oder escape() und unescape(), die an jeder Stelle
eines JavaScript-Programms und in beliebigem Kontext aufgerufen werden können, sind
Methoden an Objekte gebunden und nur mit diesen zusammen sinnvoll. Methoden zwar
JavaScript
Neue Eigenschaften
56
2 Clientseitiges JavaScript
mit dem gleichen Namen, aber mit Bindung an unterschiedliche Objekte, haben außer
dem Namen prinzipiell nichts gemein. Die Methode write() eines Objektes abc und die
Methode write() des Objektes document sind unabhängig definiert und nur gültig in
ihrem jeweiligen Objektzusammenhang. Sie können zwar vergleichbare Funktion haben,
worauf die Namensgleichheit hindeuten mag, können aber ebenso völlig verschieden
sein.
Die Syntax der Methodendefinition und des Methodenaufrufes ist gegenüber der von
Funktionen fast identisch, eben mit der entscheidenden Ergänzung um den Objektkontext.
Methoden werden für Objekte definiert und mittels dieser Objekte aufgerufen (vgl. Beispiel 2-6).
Definiert wird eine Methode methode() im Objekt objekt folgendermaßen:
objekt.methode = function(formaleparameter) {
...
return ... ;
}
// Definition
Und so wird sie aufgerufen:
rueckgabevariable = objekt.methode(aktuelleparameter); //Aufruf
Formal muss immer ein Objektname beteiligt sein, sonst sind die Regeln genau die von
Funktionen (siehe 2.3.8). Auch als Parameter kann alles wie bei Funktionen übergeben
werden, neben Zahlen und Strings selbstverständlich auch beliebige JavaScript-Objekte
und Arrays.
2.2.3
Ereignisse
In einem interaktiven JavaScript-Programm gibt es Programmteile, die erst auf Anforderung des Benutzers ablaufen sollen und nicht nur anfangs im Verlaufe des Ladeprozesses
des HTML-Dokuments. Anforderungen werden in der Regel durch Mausklicks, Eintragen von Text in Eingabefelder, Betätigen der Eingabetaste, Wechsel zu einem anderen
Webdokument u.v.a ausgelöst. In vielen Fällen sind diese Anforderungen an Formularelemente gebunden, also an Taster und Eingabefelder unterschiedlicher Art.
Um für die unterschiedlichen Eingabetypen gezielt JavaScript-Programme anzusteuern,
verfügt JavaScript über Eventhandler. Eventhandler sind aus HTML-Sicht Attribute in
HTML-Elementen, an die JavaScript-Programme mittels des Gleichheitszeichens gebunden werden können. (Sie sind mittlererweile auch im HTML-Standard Version 4 enthalten.)
Meistens sind Events in Formularelementen zu behandeln. Dazu ein einfaches Beispiel:
<FORM>
<INPUT Type=button Value=Hier! onclick='alert("Klick!");'>
</FORM>
In einem Formular wird ein Knopf mit der Aufschrift „Hier!“ definiert und mit dem
Eventhandler onclick versehen. Nach Anklicken des Knopfes wird das auf der rechten
Seite des Gleichheitszeichens stehende JavaScript-Programm ausgeführt, d.h. mit dem
Funktionsaufruf alert() ein Alarmfenster gestartet.
Im Einzelnen sind Ereignisse in Abschnitt 2.5 behandelt.
2.2 Objekte
Ein dynamisches „Hello World!“
In Beispiel 2-8 wird ein weiteres „Hello World!“ gezeigt, in dem Objekte (Eigenschaften,
Methoden, Ereignisse) im Zusammenhang mit dynamischem HTML in zweierlei Weise
demonstriert sind:
•
•
Durch ein über das Dokument gelagertes Abschnittsobjekt (<DIV...>) namens hello.
Seine Mobilität erhält dieses Objekt durch das Stylesheet style, das Abschnittseigenschaften wie Fontfarbe/-größe und Positionierung im Dokument beschreibt, und
dessen Eigenschaften durch die Ankopplung an das Stylesheet per JavaScript beeinflussbar werden.
Mittels eines Eventhandlers, der jede Mausbewegung an die Funktion move() weitergibt. Bei jedem Aufruf der Funktion wird der Abschnitt hello dann auf die aktuellen
Mauszeigerkoordinaten positioniert.
Als Ergebnis wird der Schriftzug „Hello World!“ mit dem Mauszeiger über das Browserfenster gezogen.
Beispiel 2-8a: Dynamisches HTML für den Navigator: „Hello World!“ an den Mauszeiger koppeln
<!-- ./events/mousemove-nn.html -->
<STYLE TYPE=text/css>
.style {position:absolute; font-size:24pt; color:blue}
</STYLE>
<DIV ID=hello Class=style>Hello&nbsp;World!</DIV>
<SCRIPT LANGUAGE=JavaScript>
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = move;
function move(event) {
document.hello.left = event.pageX;
document.hello.top = event.pageY;
}
</SCRIPT>
Leider bedienen sich Microsoft Internet Explorer und Netscape Navigator unterschiedlicher Objektmodellierungen und Ereignisbehandlung, so dass das oben stehende Beispiel
nur mit dem Navigator funktioniert. Für den Internet Explorer muss das Programm umgeschrieben werden, so wie es in Teil b des Beispiels gezeigt ist. (Für Weiteres sei auf
Abschnitt 2.6.8 verwiesen.)
Beispiel 2-8b: Mobiles „Hello World!“ für den Internet Explorer
<!-- ./events/mousemove-ie.html -->
<STYLE TYPE=text/css>
.style {position: absolute; font-size: 24pt; color: blue}
</STYLE>
<DIV ID=hello Class=style>Hello&nbsp;World!</DIV>
<SCRIPT LANGUAGE=JavaScript>
document.onmousemove = move;
JavaScript
2.2.4
57
58
2 Clientseitiges JavaScript
function move() {
hello.style.left = event.clientX
hello.style.top = event.clientY
}
</SCRIPT>
2.2.5
DHTML und DOM
Dynamisches HTML oder DHTML ist kein fest umrissener Begriff, sondern im Wesentlichen ein Name für alles, was dazu dient, HTML-Dokumente dynamischer und vor allem
interaktiver zu machen. Die wichtigsten Technologien in diesem Bereich sind
•
•
•
DOM, das Document Object Model;
die erweiterten Ereignismodelle des Navigators und des Internet Explorers, die in
Abschnitt 2.5 beschrieben sind;
Cascading Style Sheets und die Möglichkeit, HTML-Elemente dynamisch im Browserfenster zu positionieren. Ihre Anwendung wird beispielhaft sowohl in JavaScriptals auch in VBScript-Programmen demonstriert (VBScript im folgenden Kapitel).
DOM ist die konsequente Fortsetzung der von Netscape stammenden Modellierung des
Webbrowsers in Objekte. Das Dokumentenobjekt document ist die Wurzel in diesem
Modell. Es enthält weitere HTML-Objekte, insbesondere Formulare, Bilder und Anker.
War die Browsermodellierung in JavaScript noch auf diese und einige wenige weitere
HTML-Elemente beschränkt, so ist DOM ein Dokumentenmodell, das alle Elemente und
Attribute von HTML (oder XML!) zu beschreiben in der Lage ist.
Der DOM-Standard hat mehrere Stufen, die mit „Level 0“ beginnen. Weiter gibt es
„Level 1“, der etwa im Internet Explorer 4 annähernd verwirklicht ist, und als zukünftige
Stufe „Level 2“. Das W3C-Konsortium versucht, ein allgemeines DOM zu fördern, das
sowohl von Microsoft als auch von Netscape unterstützt wird. Die Versionen 5 von Navigator und Internet Explorer sollen dann beide DOM Level 2 unterstützen.
2.3
Sprachelemente
Im Gegensatz z.B. zu Perl sind die Sprachelemente JavaScripts einigermaßen schlank
gehalten und können daher in einem kurzen Abschnitt mit hinreichender Gründlichkeit
erläutert werden.
2.3.1
Elementare Regeln
Die folgenden elementaren Regeln für das Schreiben von Programmen in JavaScript
bestimmt dessen lexikalische Struktur. Diese Regeln sind die Grundlage für die Syntax
von Ausdrücken und Anweisungen.