JavaScript. Webdesign mit. & Ajax. Nick Heinle, Bill Peña & Ulrich Speidel. o r e i l l y s b a s i c s. 2. Auflage

Transkript

1 2. Auflage Webdesign mit o r e i l l y s b a s i c s JavaScript & Ajax Praktische Einführung in JavaScript Moderner Einsatz von interaktiven Elementen Mit zwei Ajax- Beispielanwendungen Nick Heinle, Bill Peña & Ulrich Speidel

2

3 2. AUFLAGE Webdesign mit JavaScript & Ajax Nick Heinle, Bill Peña & Ulrich Speidel Beijing Cambridge Farnham Köln Paris Sebastopol Taipei Tokyo

4 Die Informationen in diesem Buch wurden mit größter Sorgfalt erarbeitet. Dennoch können Fehler nicht vollständig ausgeschlossen werden. Verlag, Autoren und Übersetzer übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene Fehler und deren Folgen. Alle Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt und sind möglicherweise eingetragene Warenzeichen. Der Verlag richtet sich im wesentlichen nach den Schreibweisen der Hersteller. Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen. Kommentare und Fragen können Sie gerne an uns richten: O Reilly Verlag Balthasarstr Köln Tel.: 0221/ Fax: 0221/ kommentar@oreilly.de Copyright: 2006 by O Reilly Verlag GmbH & Co. KG 1. Auflage Auflage 2006 Die Darstellung von R2D2 im Zusammenhang mit dem Thema JavaScript ist ein Warenzeichen des O Reilly Verlags. Bibliografische Information Der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über abrufbar. Lektorat: Inken Kiupel, Köln Fachgutachten: Denny Carl, Berlin Korrektorat: Sibylle Feldmann, Düsseldorf Satz: DREI-SATZ, Husby Umschlaggestaltung: Michael Oreal, Köln Produktion: Andrea Miß, Köln Belichtung, Druck und buchbinderische Verarbeitung: Druckerei Kösel, Krugzell; ISBN ISBN Dieses Buch ist auf 100% chlorfrei gebleichtem Papier gedruckt.

5 First Inhalt Vorwort Einstieg in JavaScript Eigene Vor- und Zurück-Buttons nutzen Beschreibende Links einfügen Tag-und-Nacht-Skript Mit Fenstern arbeiten Grundlagen bei der Arbeit mit Fenstern Neue Fenster öffnen Mit Fernbedienungsfenstern arbeiten Formulare und Validierung Einführung in Formulare Madlibs Die Formulareingabe überprüfen Ist das wirklich Ihre -Adresse? Überprüfungen Ordnung durch Arrays Was sind Arrays? Werden Sie unberechenbar! Das Datum richtig angeben Auswahlmenüs Browser und Plugins erkennen Mit welchem Browser haben wir es zu tun? Plugins ermitteln Das Betriebssystem ermitteln VII V

6 6 Eine Site mit Hilfe von Cookies anpassen Was ist ein Cookie? Einfache Cookie-Operationen Ein Willkommensgruß an neue Besucher Formulare, die sich erinnern Benutzerdefinierte Seiten Dynamic HTML Was ist DHTML? Das Document Object Model Dynamische Cascading Style Sheets Mit Layern vertraut werden Browsererkennung Interaktive DHTML-Verfahren Drop-down-Menüs Gleitende Register Layer mit eingeschränktem Anzeigebereich scrollen Anwendungen für Fortgeschrittene Objektorientiertes Skripting Testen Sie Ihre Leser Relationale Menüs Weiterführende Informationen Einfaches Ajax Wozu eigentlich Ajax? HTTP-Requests mit JavaScript-Objekten Eine einfache Chat-Anwendung mit Ajax Ajax und XML Eine Schach-Anwendung mit Ajax Das Design des Schachspiels Die Implementierung auf der Clientseite Das serverseitige Skript A Häufig verwendete JavaScript-Objekte B Event-Handler C Stileigenschaften D JavaScript-Syntax Index Links VI Inhalt

7 First Hier Mini IVZ eingeben! Vorwort Erstellen auf den Arbeitsseiten (siehe Muster) Abstand untere Tabellenlinie zu Textanfang 1,8 cm -> also: manuell auf den Arbeitsseiten ziehen!!! Am Anfang war HTML, und es war gut. HTML (HyperText Markup Language) ermöglichte es Webautoren, strukturierte Seiten mit Bildern, Text und Hyperlinks zu erstellen. HTML war und ist ein Format, das sich gut für die verständliche und ansprechende Darstellung statischer Informationen eignet. Den Webautoren wurde jedoch bald klar, dass HTML allein nicht ausreicht. Als das Internet beliebter wurde, wurden auch Interaktivität und unmittelbares Feedback notwendig. Im Dezember 1995 veröffentlichte Netscape (damals Mosaic) mit JavaScript eine Lösung für einige der mit statischem HTML verbundenen Probleme und Beschränkungen. JavaScript wurde als einfache und effiziente Skriptsprache für das Internet mit enger Anbindung an HTML entworfen. Im Gegensatz zu anderen damals verfügbaren Programmiersprachen, wie Java, C, C++ oder Perl, wurde JavaScript direkt in den Webbrowser integriert und arbeitete mit HTML zusammen. Heute ist JavaScript neben HTML/XHTML, Cascading Style Sheets (CSS), XML und dem Document Object Model (DOM) einer der Schlüsselstandards, auf denen das moderne Internet aufbaut. Warum ist JavaScript wichtig? Dieses Buch wird Sie mit verschiedenen Facetten von JavaScript vertraut machen. Sie werden erkennen, warum JavaScript wichtig ist und wie man damit interessantere Websites erstellen kann. Der Zweck von JavaScript besteht darin, HTML interaktiv zu machen und damit die Einbindung von Anwenderdialogen und Feedback, Multimedia und Animationen zu ermöglichen. JavaScript ist unter anderem aus den folgenden Gründen wichtig für die Webentwicklung: Event-Handler: Mit Event-Handlern kann JavaScript Ereignisse (Events) abfangen, die auf einer Seite auftreten, z.b. wenn der Anwender eine Formularschaltfläche anklickt oder die Maus über einen Link bewegt. Die Event-Handler von JavaScript VII

8 können dann als Reaktion auf diese Aktionen Code ausführen und es den Webseiten damit ermöglichen, im Browser mit Formulardaten zu arbeiten, wenn eine Schaltfläche angeklickt wird, oder Animationseffekte anzuzeigen, wenn die Maus über einen Link bewegt wird. Das Document Object Model: Dank des DOM kann JavaScript beliebige in HTML definierte Objekte steuern, entfernen und hinzufügen. So lassen sich beispielsweise die Inhalte einer Tabellenzelle austauschen oder eine Liste sortieren. Das Document Object Model definiert, welche Objekte JavaScript auf einer Webseite steuern kann und wie es sie ansprechen kann. Dadurch können Sie JavaScript bei der Erstellung leistungsfähiger webbasierter Mulitmedia-Anwendungen einsetzen. Nicht-HTML-Objekte: Dank der Nicht-HTML-Objekte hat JavaScript Zugriff auf Teile des Browsers, die nichts mit HTML-Code zu tun haben, der auf Webseiten angezeigt wird. So kann JavaScript z.b. ermitteln, welcher Browser verwendet wird, auf welchem Betriebssystem dieser ausgeführt wird und sogar, welche Plugins im Browser installiert sind. Außerdem kann JavaScript auf Browser-Cookies zugreifen, so dass es mit einigen Einschränkungen Informationen über lange Zeit hinweg im Browser speichern kann. Mehr noch: JavaScript kann sich zusätzliche Informationen von einem Webserver besorgen und diese in das angezeigte Dokument einbauen diese Technik ist inzwischen unter dem Namen Ajax bekannt. Was bringt Ajax? Ajax (Asynchronous JavaScript and XML) ist im Grunde genommen keine neue Technologie, sondern lediglich eine leistungsfähige Mischung etablierter Komponenten: JavaScript, einer serverseitigen Programmiersprache wie z.b. PHP, JSP, oder ASP.net, und XML zur standardisierten Formatierung der Daten, die zwischen den beiden ausgetauscht werden. Diese Kommunikation läuft asynchron ab. Mit etwas Erfahrung im Websurfen werden Sie das folgende Problem kennen: Sie haben sich eine umfangreiche Webseite heruntergeladen, z.b. eine lange Liste mit s auf Ihrem Webmail-Portal. Dann möchten Sie eine der Mails als Spam löschen. Klar, das geht, aber wenn Sie eine frische Liste ohne die Spam-Mail (aber dafür vielleicht mit inzwischen neu eingetroffenen Mails) wollen, mussten Sie bisher die gesamte Liste neu laden. Dank Ajax geht das inzwischen auch etwas einfacher: Die JavaScript-Komponente einer Ajax-Webmail-Applikation fängt Ihre Aktion ab (das Drücken des Lösch-Buttons für die Spam-Mail) und schickt eine entsprechende Benachrichtigung an ein (z.b. PHP-)Skript auf dem Webserver, ohne aber dabei die Seite neu zu laden. Der Server schickt eine oft XML-codierte Antwort zurück, in der sämtliche Änderungen der Liste enthalten sind. Diese Antwort geht direkt an JavaScript, wird dort dekodiert und über DOM zum Aktualisieren der bereits im Browser vorhandenden Links VIII Vorwort

9 Rechts Liste verwendet. Das spart Bandbreite und Zeit, weil weniger Informationen ausgetauscht werden müssen. Beim Lesen dieses Buchs werden Sie erkennen, dass Sie kein Informatik-Diplom benötigen, um mit JavaScript umzugehen oder mit Ajax zu arbeiten. Sowohl Anwendungsdesigner als auch Programmierer können mit JavaScript und Ajax Websites erstellen. Dies ist der eigentliche Grund, warum JavaScript so wichtig ist! Besuchen Sie unbedingt auch die Website zu diesem Buch unter der Adresse Dort können Sie alle Beispiele zu diesem Buch herunterladen, damit Sie sie in Ihre eigenen Webseiten einbauen können. Für wen ist dieses Buch gedacht? Dieses Buch wurde für Webautoren und Webdesigner entworfen, die lernen möchten, wie sie ihre Webseiten mit JavaScript und Ajax verbessern können. Es soll nützliche und gebräuchliche Beispiele für JavaScript-Code bei der Arbeit zeigen und zugleich die Konzepte und die Syntax dieser Skriptsprache vermitteln. Die Beispiele sind so entworfen, dass sie direkt in Webseiten eingebaut werden können. Daher konzentrieren sich die Erklärungen auf die wesentlichen Merkmale und besprechen, wie man die Skripte an individuelle Bedürfnisse anpassen kann. Dieses Buch ist für Webdesigner und Programmierer gleichermaßen geschrieben, spricht wegen seiner praktischen und realitätsnahen Anwendungen die Designer und Nichtprogrammierer möglicherweise aber mehr an als die meisten anderen Bücher über JavaScript. Das Buch setzt Grundkenntnisse in Webdesign und in einfachem HTML voraus. Falls Sie noch keinerlei Erfahrung mit dem Internet haben, sollten Sie sich zunächst mit diesen Themen befassen, bevor Sie JavaScript zu lernen versuchen. Dafür empfehlen wir Ihnen die Bücher HTML mit CSS & XHTML von Kopf bis Fuß sowie HTML und XHTML: Das umfassende Referenzwerk. Beide Bücher sind bei O Reilly erschienen. Im Zusammenhang mit Ajax möchten Sie sich vielleicht auch in PHP einarbeiten, dazu empfehlen wir PHP5 - ein praktischer Einstieg von Ulrich Günther (der unter seinem ehelichen Namen Speidel auch an der neuen deutschen Version des vorliegenden Buchs mitgewirkt und die beiden letzten Kapitel beigesteuert hat). Die Themen in diesem Buch Dieses Buch enthält die folgenden elf Kapitel: Kapitel1, Einstieg in JavaScript, zeigt drei einfache JavaScript-Beispiele, so dass Sie direkt damit beginnen können, Ihre Webseiten attraktiver zu gestalten. Vorwort IX

10 Kapitel2, Mit Fenstern arbeiten, erläutert, wie man Fenster steuert, erstellt und anspricht, da sich auf einer Webseite alles in einem Fenster abspielt. Kapitel3, Formulare und Validierung, erklärt, wie Sie mit Hilfe von JavaScript mit Formularelementen interagieren, also z.b. Formulardaten validieren. Kapitel4, Ordnung durch Arrays, führt die Arrays ein, die für die Organisation von Informationen hervorragend geeignet sind, und zeigt, wie Sie Ihre Webseiten mit Arrays verbessern können. Kapitel5, Browser und Plugins erkennen erklärt, wie Sie mit JavaScript Informationen über den Webbrowser einholen, mit dem ein User Ihre Website besucht. Im nächsten Schritt erfahren Sie, wie Sie Ihren JavaScript-Code für den Browser des Users optimieren. Kapitel6, Eine Site mit Hilfe von Cookies anpassen, erklärt, wie man mit Java- Script Cookies erstellen kann, um die Besucher der Website zu beobachten. Kapitel7, Dynamic HTML, erläutert in Grundzügen, wie man JavaScript mit den W3C-Standards DOM und CSS kombinieren kann, um auf einer Webseite eine Vielzahl von dynamischen Effekten zu erzeugen. Kapitel8, Interaktive DHTML-Verfahren, setzt die Beschreibung von Dynamic HTML fort und zeigt einige komplexe, interaktive Beispiele. Kapitel9, Anwendungen für Fortgeschrittene, hilft Ihnen dabei, Ihre Skripten leichter nachvollziehbar und effizienter zu gestalten. Kapitel 10, Einfaches Ajax, zeigt Ihnen, wie Sie Ajax auch ohne XML-Kenntnisse nutzen können. Kapitel 11, Ajax und XML, lädt Sie zu einem Schachspiel als Beispiel für eine komplexere Anwendung ein, in der das X in Ajax und eine ganze Menge anderer fortgeschrittener Techniken zum Einsatz kommen. Darüber hinaus enthält das Buch vier Anhänge mit nützlichem Referenzmaterial für die Arbeit mit JavaScript. Links Konventionen In diesem Buch werden die folgenden typographischen Konventionen verwendet: Kursivschrift Kennzeichnet Fachbegriffe, die definiert werden, URLs, -Adressen, Datei- und Verzeichnisnamen und dient der Hervorhebung. Nichtproportionalschrift Kennzeichnet Codebeispiele und HTML-Tags, -Attribute sowie JavaScript-Elemente innerhalb des Textes. X Vorwort

11 Rechts Nichtproportionalschrift fett Dient der Hervorhebung in Codebeispielen. Nichtproportionalschrift kursiv Kennzeichnet in HTML-Attributen und JavaScript-Ausdrücken Platzhalter für Werte. Die Glühbirne kennzeichnet einen Tipp oder einen generellen Hinweis mit nützlichen Zusatzinformationen zum Thema. Der Regenschirm kennzeichnet eine Warnung oder ein Thema, bei dem Sie Vorsicht walten lassen sollten. In Kästen mit einem Mikroskop wird ein Thema genauer unter die Lupe genommen. Beispielskripte Die in diesem Buch verwendeten Skripte finden Sie auf der Website des O Reilly Verlags unter der folgenden Adresse: Vorwort XI

12

13 First Kapitel 1SDiving into JavaScript KAPITEL 1 In diesem Kapitel: Hier Eigene Mini Vor- und IVZ Zurück-Buttons eingeben! nutzen Beschreibende Links einfügen Tag-und-Nacht-Skript Einstieg in JavaScript Erstellen auf den Arbeitsseiten (siehe Muster) Abstand untere Tabellenlinie zu Textanfang 1,8 cm -> also: manuell auf den Arbeitsseiten ziehen!!! Falls Sie bereits andere Bücher über JavaScript gelesen haben, mussten Sie vielleicht zuerst endlose Seiten über Funktionen, Methoden, Operatoren usw. lesen, bevor Sie erfuhren, wie Sie ein ganz einfaches Skript schreiben. Wenn Sie JavaScript erst einmal besser kennen, müssen Sie diese und weitere Konzepte natürlich verstehen, aber Sie können Ihre Webseiten auch schon attraktiver gestalten, wenn Sie einfach direkt in JavaScript einsteigen. Genau darum geht es in diesem Kapitel, an dessen Ende Sie bereits zwei praktische Skripte kennen werden: eines, mit dem Sie der Statuszeile beschreibende Kommentare hinzufügen, und eines, mit dem Sie den Besuchern Ihrer Website der Tageszeit angepasste Seiten anbieten. Wichtiger ist jedoch, dass Sie dann verstehen werden, warum die Skripte das machen, was sie machen, und dass Sie bereit sein werden, tiefer in JavaScript einzusteigen. In diesem Kapitel werden die folgenden Themen besprochen: Event-Handler Variablen Funktionen Objekte ein Dokument schreiben die if-anweisung Eigene Vor- und Zurück-Buttons nutzen Sicherlich kennen Sie diese Situation: Sie arbeiten sich durch eine Website und lesen z.b. eine Dokumentation. Sie sind auf einer interessanten Seite angekommen und folgen einem Link auf eine andere Seite. Nachdem Sie die Seite inspiziert haben, möchten Sie aber so schnell wie möglich wieder zur vorhergehenden Seite, 1

14 etwa weil Sie dort weitere Texte lesen wollen. Wieder auf der ursprünglichen Seite angelangt, wollen Sie kurz noch einmal etwas auf der eben besuchten Seite nachsehen. Um zwischen den Seiten hin- und herzuspringen, können Sie natürlich die Vor- und Zurück-Buttons Ihres Browsers verwenden. Das ist aber mühsam, weil Sie Ihre Maus und Ihre Aufmerksamkeit erst einmal aus dem Browserdokument heraus auf die gewünschten Buttons lenken müssen. Mit JavaScript geht das alles einfacher, indem Sie die Buttons direkt im Dokument platzieren. Dazu müssen Sie den folgenden Code in Ihr HTML-Dokument einfügen: <input type="button" onclick="history.back();" value="zurück"> <input type="button" onclick="history.forward();" value="vor"> Der HTML-Code hier besteht einfach aus zwei Input-Elementen des Typs button, denen Sie vielleicht bisher noch nicht begegnet sind, weil sie fast ausschließlich in Verbindung mit JavaScript zur Anwendung kommen. Im Gegensatz zu Schaltflächen des Typs submit oder reset, die fest vorgegebene Funktionen haben, müssen Sie diese Buttons selbst verdrahten. Diese Verdrahtung geht über die onclick-event- Handler der Buttons. Links Events und Event-Handler Ein Event-Handler ist Code, der dann ausgeführt wird, wenn ein Event (ein Ereignis) auftritt. Was ist ein Event? Es ist etwas, das geschieht: Der Anwender klickt mit der Maus auf einen Link, oder eine Seite wird geladen, usw. In diesem Fall haben wir es mit dem Event onclick zu tun, das dann auftritt, wenn mit der Maus auf den Button geklickt wird. Da sich die Event-Handler in den jeweiligen Buttons befinden, treten die Events nur dann auf, wenn der Mauszeiger beim Klicken über dem entsprechenden Button schwebt. Event-Handler kann man in vielen Elementen der Seite verwenden, z.b. in Links, Formular-Schaltflächen und Bildern. Tabelle 1-1 führt einige häufig verwendete Event-Handler auf, die JavaScript unterstützt, die Tags, in denen sie verwendet werden können, sowie das Event, das sie behandeln. Tabelle 1-1: Von JavaScript unterstützte, gebräuchliche Event-Handler Event-Name Wo? Wann? onmouseover HTML-Elemente, z.b. Links oder Bilder Wenn die Maus über einen Link bewegt wird. onmouseout HTML-Elemente, z.b. Links oder Bilder Wenn die Maus von einem Link wegbewegt wird. onmousedown HTML-Elemente, z.b. Links oder Bilder Beim Drücken der Maustaste. onmouseup JavaScript-Funktionen im Dokument Beim Loslassen der Maustaste. onmousemove JavaScript-Funktionen im Dokument Beim Bewegen der Maus. onclick Links (und Bilder innerhalb von Links), Schaltflächenelemente Wenn der Anwender einen Link oder ein Schaltflächenelement anklickt. 2 Kapitel 1: Einstieg in JavaScript

15 Rechts Tabelle 1-1: Von JavaScript unterstützte, gebräuchliche Event-Handler (Fortsetzung) Event-Name Wo? Wann? onchange Auswahlmenüs, Texteingabeelemente Wenn eine Option ausgewählt oder der Text verändert wird. onsubmit Formulare Wenn das Formular abgeschickt wird. onload Seiten-Body, Frameset, Bilder Wenn das Dokument oder Bild vollständig geladen wurde. onunload Seiten-Body, Frameset Wenn das Dokument verlassen wird. Der Code, der onclick folgt, wird ausgeführt, wenn das Event auftritt (in diesem Fall also, wenn Sie mit der Maus auf den Button klicken). Achten Sie darauf, dass hinter onmouseover unbedingt ein Gleichheitszeichen (=) folgt. Das Gleichheitszeichen besagt:»wenn onmouseover auftritt, dann führe den folgenden Code aus.«der Code, der dann folgt, muss in doppelte Anführungszeichen eingeschlossen sein, damit der Handler weiß, welchen Code er ausführen soll (den gesamten Code innerhalb der Anführungszeichen, nichts anderes). Um es in der Sprache der Programmierer auszudrücken: Das Gleichheitszeichen weist dem Event-Handler einen Wert zu. Natürlich sollte Ihnen dieses Konzept bereits bekannt sein, da Sie das Gleichheitszeichen in HTML ständig dazu verwenden, Attributen Werte zuzuweisen (z.b. <a href="seite.html">). Eingebaute JavaScript-Objekte, Funktionen und Methoden Der JavaScript-Code, den wir dem Event-Handler als Wert zuweisen, ist zwar sehr kurz, macht uns aber gleich mit einem Objekt namens history bekannt. In diesem Objekt speichert der Browser des Benutzers eine bestimmte Anzahl Seiten ab, die zuletzt besucht worden sind. Neben dem Speicher für die bereits besuchten Seiten verfügt dieses Objekt aber auch über einige eingebaute Funktionen, mit denen diese Daten verarbeitet werden können. Solche eingebauten Funktionen nennt man (Objekt-)Methoden, und wir lernen hier gleich zwei kennen: history.forward() und history.back(). Der Punkt in der Syntax der Methoden dient dazu, JavaScript mitzuteilen, dass es diese Methoden im history-objekt finden kann, und die Klammern geben an, dass es sich um Methoden handelt. Mit history.forward() simuliert JavaScript einen Klick auf den Vorwärts-Button des Browsers, mit history.back() einen Klick auf den Zurück-Button. Das war s auch schon. In Kapitel 2 kehren wir noch einmal kurz zum history- Objekt zurück. Im nächsten Beispiel lernen Sie einen weiteren Event-Handler und ein weiteres Objekt kennen, zusammen mit etwas komplizierterer JavaScript-Syntax. Eigene Vor- und Zurück-Buttons nutzen 3

16 Beschreibende Links einfügen Wünschen Sie sich auch manchmal, dass Links sprechen könnten? Anders ausgedrückt: Wäre es nicht hilfreich, wenn man den Anwendern mitteilen könnte, was sie erwartet, wenn sie einen bestimmten Link anklicken? Mit JavaScript ist das ganz einfach. Abbildung 1-1 zeigt eine Webseite mit einem Bild des O Reilly-Logos. Allerdings teilt das Logo dem Anwender nicht viel darüber mit, wohin er weitergeleitet wird, wenn er das Bild anklickt. Um dieses Problem zu lösen, können wir in der Statuszeile des Browsers eine kurze Beschreibung des Links anzeigen, sobald der Anwender den Cursor über ein Bild bewegt. Sind die Beschreibungen gut und treffend, geben sie der Website einen nützlichen Kontext. Wenn man die Maus in unserem Beispiel über das Logo bewegt, wird in der Statuszeile der Text»Klicken Sie hier, um auf die O Reilly-Homepage zu gelangen«angezeigt. Wie leicht das zu bewerkstelligen ist, zeigt Beispiel 1-1. Links Beispiel 1-1: Mit diesem Code fügen Sie einem Link Statuszeilentext hinzu. <a href=" onmouseover="window.status = 'Klicken Sie hier, um auf die O\'Reilly-Homepage zu gelangen'; return true;"> <img border="0px" src="oreilly.gif"/></a> Abbildung 1-1: In der Statuszeile zusätzliche Informationen anzeigen Der Link im Beispiel 1-1 sieht zwar wie ein normaler Link aus, funktioniert offenbar aber etwas anders. Das Tag <a> enthält ebenfalls ein kleines JavaScript-Codefragment. Dieses beginnt (und der HTML-Code endet) mit onmouseover, einem anderen der integrierten Event-Handler von JavaScript. Das onmouseover-event tritt wie bereits erwähnt auf, wenn die Maus über den Link bewegt wird. Wenn Sie den 4 Kapitel 1: Einstieg in JavaScript

17 Rechts Event-Handler mit geeignetem Code verbinden, erhalten Sie einen Link, der etwas macht, sobald man die Maus über den Link bewegt. Der Code im Beispiel 1-1 zeigt die Beschreibung in der Statuszeile des Browsers an. onmouseover für Links verwenden Den onmouseover-event-handler verwenden Sie genauso wie den onclick-handler im ersten Beispiel. Wir müssen uns also nur mit dem Code befassen, der danach folgt: "window.status = 'Klicken Sie hier, um auf die O\'Reilly-Homepage zu gelangen'; return true;" Der Code weist die Statuszeile des Browsers (JavaScript bezeichnet sie als window. status) an, den Text»Klicken Sie hier, um auf die O Reilly-Homepage zu gelangen«anzuzeigen. Eigentlich ist das schon alles. Aber selbst derart einfacher Code enthält einige beachtenswerte Punkte: Dieser Code steht in doppelten Anführungszeichen, die kennzeichnen, wo der Code beginnt und wo er endet. Auch diese Struktur sollte Ihnen bereits vertraut sein, da man in HTML mit den doppelten Anführungszeichen den Anfang und das Ende eines Werts kennzeichnet (z.b. <a href="seite.html">). window.status ist die Art, wie JavaScript auf die Statuszeile verweist. Genauer gesagt, verweist sie auf die Eigenschaft status des window-objekts. Die Bedeutung dieser Begriffe werden wir weiter unten in diesem Kapitel besprechen. Mit dem Gleichheitszeichen wird window.status hier ein Wert zugewiesen. Dieser Wert ist die Zeichenkette, die angezeigt werden soll. Der Text hinter dem Gleichheitszeichen ist in einfache Anführungszeichen gefasst. Auch hier geben wir mit den Anführungszeichen wieder den Anfang und das Ende des Werts an, wobei wir statt der doppelten jedoch einfache Anführungszeichen verwenden. Der Grund hierfür ist, dass der Text innerhalb der in doppelte Anführungszeichen gefassten JavaScript-Zeichenkette steht. Verwendeten wir für die Beschreibung dieses Links nun ebenfalls doppelte Anführungszeichen, müsste der JavaScript-Interpreter annehmen, dass der JavaScript-Code mit dem zweiten doppelten Anführungszeichen endet. Wenn Sie eine Zeichenkette in eine andere einfügen, müssen Sie immer zwischen doppelten und einfachen Anführungszeichen wechseln. Das Semikolon hinter dem Beschreibungstext kennzeichnet das Ende einer JavaScript-Zeile. Gewöhnen Sie sich an den Anblick der Semikola: Beinahe jede JavaScript-Zeile endet mit einem Semikolon. Beschreibende Links einfügen 5

18 Links Knifflige Details Direkt vor einem Apostroph innerhalb einfacher Anführungszeichen müssen Sie einen Backslash (\) einfügen, also \'. Auch dies dient dazu, Verwirrung zu vermeiden, da der Apostroph und das einfache Anführungszeichen ein und dasselbe Zeichen sind. So weit, so gut, aber was bedeuten die Wörter return true; am Ende dieses Codes? Im Moment brauchen Sie nur zu wissen, dass diese Wörter den Browser davon abhalten, in der Statuszeile wie üblich die URL anzuzeigen. Würden diese Wörter fehlen, könnte der Anwender unsere Nachricht in der Statuszeile niemals sehen, da sie sofort durch die URL überschrieben würde. Dieses return werden wir weiter unten in diesem Buch bei mehreren Skripten ausführlich besprechen. Um dieses Skript in Ihrer Website zu verwenden, ersetzen Sie den Text zwischen den einfachen Anführungszeichen (sowie natürlich auch die URL und den Inhalt) einfach durch eigenen Text. Sollten Sie dieses Skript ausprobiert haben, ist Ihnen vermutlich aufgefallen, dass der Text in der Statuszeile nicht direkt wieder verschwindet, wenn Sie die Maus vom Link wegbewegen. Um dieses Problem zu lösen, müssen wir dem Link einen zweiten Event-Handler hinzufügen, und zwar einen für onmouseout-events. Beispiel 1-2 zeigt diesen Event-Handler. Beispiel 1-2: Verbesserter Code, um einem Link Statuszeilentext hinzuzufügen <a href=" onmouseover="window.status = 'Klicken Sie hier, um auf die O\'Reilly-Homepage zu gelangen'; return true;" onmouseout="window.status = '';"> <img border="0px" src="oreilly.gif"/></a> Der Code für den Event-Handler onmouseout setzt window.status einfach auf eine leere Zeichenkette (''). Der Event-Handler onmouseout wird ausgelöst, sobald sich die Maus vom Link wegbewegt, und löscht den Text aus der Statuszeile. Meine Statuszeile ändert sich nicht! Was ist los? Es ist kaum zu glauben, aber mit Statuszeilentext kann man Sie unter Umständen ganz schön reinlegen. Der beliebteste Trick ist, Ihnen per Statuszeile eine falsche URL unterzujubeln. Wenn Sie die Statuszeile nicht über JavaScript ändern, wird Ihnen dort die URL angegeben, auf die der Link zeigt. Nun kommt es leider gelegentlich vor, dass unehrliche Provider mit ihrem JavaScript-Code die Statuszeile mit einer vorgetäuschten URL überschreiben, z.b. so: 6 Kapitel 1: Einstieg in JavaScript

19 Rechts <html> <head><title>gefälschter Statuszeilentext</title></head> <body> <a href=" onmouseover="window.status = ' return true;" onmouseout="window.status = '';"> <img border="0px" src="oreilly.gif"/></a> </body> </html> Damit sieht alles nach einem reibunglosen Transfer zu einem renommierten Computerverlag aus, aber stattdessen landen Sie auf einer Site, die von einer ganz anderen Organisation betrieben wird. Mit etwas Glück erwartet Sie dort nur verwirrende Werbung, aber es könnte genauso gut eine gefälschte Version der O Reilly-Homepage sein, über deren angeblichen Onlineshop Sie Ihre Kreditkartendaten für Bücher loswerden, die Sie nie geliefert bekommen. Aus diesem Grund ist es inzwischen nicht mehr selbstverständlich, dass Ihr Browser eine Änderung des Statuszeilentexts zulässt. Mozilla Firefox beispielsweise müssen Sie dafür erst konfigurieren. Das geht über Extras Einstellungen Web-Features Erweitert Statuszeilentext ändern. Der Grund dafür, dass es inzwischen erheblich weniger Websites gibt, die freundliche Unterstützung über die Statuszeile anbieten, liegt in der zunehmenden Verbreitung von Content-Management-Systemen. Sie verlangen ihren Redakturen denjenigen, die Inhalte ins Web stellen aus Gründen der Einfachheit nicht immer einen Statuszeilentext ab. Das braucht für Sie aber noch lange kein Grund zu sein, Ihren eigenen Benutzern diese freundliche Geste zu verweigern! Tag-und-Nacht-Skript Nun werden Sie Ihr erstes echtes Skript schreiben; dafür müssen Sie einige neue Begriffe verstehen. Falls Sie bisher noch nicht programmiert haben (in C, C++, VB, Pascal oder einer anderen Sprache), ist dies genau das richtige Skript für Sie. Weil das erste Beispiel JavaScript einbaute, war es eher ein erweitertes <a>-tag als ein wirkliches Skript. Das zweite Beispiel ist komplexer. Da die Anwender beim Surfen im Internet zu verschiedenen Tageszeiten unterschiedliche Ziele verfolgen, kann es Ihrer Website zugute kommen, wenn Sie tagsüber und nachts jeweils verschiedene Inhalte anbieten. So könnte ein»gourmet- Tempel«mit Zustelldienst z.b. tagsüber Informationen über Kaffee, Kuchen und das Mittagsmenü anzeigen und abends das jeweilige Dinnermenü. Die Abbildungen 1-2 und 1-3 zeigen zwei mögliche Seiten. Tag-und-Nacht-Skript 7

20 Links Abbildung 1-2: Eine»Tag«-Seite Abbildung 1-3: Eine»Nacht«-Seite Wie macht man dies nun mit JavaScript? Kurz gesagt: Ein Skript prüft die Tageszeit und liefert dann den Tages- oder den Nacht-HTML-Code. In diesem kleinen Skript werden wir mehrere Begriffe klären: das Date- und das document-objekt Variablen Eigenschaften und Methoden die if -Anweisung 8 Kapitel 1: Einstieg in JavaScript

21 Rechts Beispiel 1-3 zeigt den Code für eine Seite, die je nach Tageszeit unterschiedliche Inhalte darstellt. Im Anschluss an das Listing werden wir den Code ausführlicher erklären. Beispiel 1-3: Das Tag-und-Nacht-Skript <html> <head><title>tag-und-nacht-skript</title></head> <body> <h1>a la Carte - Restaurant & Café</h1> <script language="javascript">  </script> </body> </html> Das script-tag Alle Skripten beginnen und enden mit dem gleichen Element: dem Tag script. Das HTML-Dokument in Beispiel 1-3 ist im Grunde ein einziges großes script-tag; der Body des Dokuments enthält keinerlei anderen Inhalt. Die Syntax sieht folgendermaßen aus: <script language="javascript"> Der Browser betrachtet alles, was sich innerhalb des script-tags befindet, als reinen JavaScript-Code und nichts anderes. An dieser Stelle werden sich die meisten Ihrer Skripten befinden. script-tags kann man an jeder Stelle eines HTML-Dokuments einfügen, im Kopf ebenso wie im Body. In diesem Fall haben wir das script-tag dort eingefügt, wo das Skript eine Seite ausgibt: im Body. In anderen Dokumenten werden Sie Funktionen sehen, die in einem script-tag im Kopf des Dokuments definiert sind und dann an anderen Stellen der Seite in anderen script-tags aufgerufen werden. Tag-und-Nacht-Skript 9

22 Links Separate JavaScript-Dateien Später, wenn Sie ein JavaScript-Experte sind, sollten Sie längere Skripten getrennt vom HTML-Dokument in eigenen Dateien speichern. Mit dem Attribut src des script-tags können Sie eine ganze JavaScript-Datei einfügen. Wenn Sie Ihr Skript z.b. in der Datei meinskript.js gespeichert haben, können Sie es mit dem folgenden script-tag einfügen: <script src="meinskript.js" language="javascript"> </script> Im Moment sind wahrscheinlich alle Ihre Skripten noch so kurz, dass es nicht sinnvoll ist, sie aus dem HTML-Dokument herauszunehmen. In späteren Kapiteln werden wir dann allerdings diese Technik anwenden. Vielleicht fragen Sie sich nun:»warum enthält das script-tag das Attribut language?«der Grund hierfür ist, dass JavaScript nicht die einzige Skriptsprache für das Internet ist. Sie können auch VBScript verwenden, eine Skriptsprache, die auf der Programmiersprache Visual Basic beruht. Allerdings wird VBScript nur vom Internet Explorer unterstützt, daher hat es lediglich einen begrenzten praktischen Nutzen. Es gibt mehrere Versionen von JavaScript, die jeweils von verschiedenen Browsern unterstützt werden. JavaScript 1.0 wurde im Netscape Navigator 2.0 eingeführt. Seitdem hat sich JavaScript zur Version 1.7 weiterentwickelt, die derzeit aber nur von der Beta-Version von Firefox 2.0 unterstützt wird. Die aktuellen Browserversionen der letzten Jahre unterstützen JavaScript 1.3 (Internet Explorer 6), JavaScript 1.5 (Opera 7 und höher) oder sogar die Version JavaScript 1.6 (Mozilla 1.5 und höher). Sind diese verschiedenen Versionen ein Grund zur Beunruhigung? Normalerweise nicht. Die meisten Skripten in diesem Buch verwenden Merkmale, die von allen in den letzten Jahren veröffentlichten Browsern unterstützt werden. Sofern dies nicht zutrifft, geben wir einen entsprechenden Hinweis. Falls ein Skript ein Merkmal aus der neuesten JavaScript-Version verwendet, müssen Sie an Ihrem script-tag lediglich eine geringfügige Änderung vornehmen: <script language="javascript1.5"> Das Date-Objekt und Variablen Der erste Teil des Tag-und-Nacht-Skripts ermittelt anhand der Systemuhr im Rechner des Anwenders die Tageszeit. Hierfür verwendet es das Date-Objekt, das in JavaScript integriert ist: var jetzt = new Date( ); var stunde = jetzt.gethours( ); 10 Kapitel 1: Einstieg in JavaScript

23 Rechts Die erste Zeile erzeugt ein neues Date-Objekt und gibt ihm den Namen jetzt. Programmierer bezeichnen jetzt als Variable und meinen damit eigentlich nur, dass dies ein Name ist, der mit einer bestimmten Information verbunden ist. Von nun an können wir das aktuelle Datum und die Uhrzeit also als jetzt bezeichnen. Als Nächstes sagt das Skript:»Nimm jetzt (das aktuelle Datum und die Uhrzeit), frage es nach der aktuellen Stunde (gethours( )) und nenne die Antwort stunde.«wie wir etwas weiter unten erläutern werden, ist gethours() eine Methode des Date- Objekts. Nun können wir auf die aktuelle Stunde also namentlich verweisen, indem wir die Variable stunde verwenden. Woraus besteht ein Name? Ein Variablenname muss mit einem Buchstaben, Dollarzeichen oder Unterstrich beginnen. Danach können Buchstaben, Unterstriche und Ziffern folgen. Die folgenden Variablennamen sind also alle zulässig: meincan, Can1, $Can und _Can1. Diese hingegen nicht: 1Can und!can. JavaScript vor sehr alten Browsern verstecken Wenn Sie ein Skript in eine Webseite einfügen, besteht das einzige Problem darin, dass sehr alte Browser das Tag script nicht verstehen und den Code auf der Webseite als normalen Text anzeigen. Dieses Problem lässt sich mit HTML-Kommentaren jedoch leicht umgehen: <script language="javascript">  </script> Ältere Browser ignorieren <script>-tags und alles, was zwischen  steht. Diesen Kommentartyp kann man nur am Anfang und am Ende eines Skripts verwenden, und die Kommentare müssen unbedingt in einer eigenen Zeile stehen. Wenn Sie sie in dieselbe Zeile wie Code setzen, wird dieser Code auskommentiert, und Ihr Skript funktioniert nicht mehr. Weitere Einzelheiten zur Funktionsweise dieser Kommentare finden Sie weiter unten im Exkurs»Einige Kommentare«. Wir haben dieses Verfahren zum Verbergen des Skripts in Beispiel 1-2 verwendet, damit Sie damit vertraut werden. In den weiteren Beispielen werden wir es jedoch nicht mehr verwenden, da heute eigentlich alle Browser das Tag script verstehen. Wie Sie im Tag-und-Nacht-Skript sehen, wird eine Variable mit var und dem Namen der Variablen gesetzt. Sobald wir eine Variable gesetzt haben, können wir ihr einen Wert zuweisen, wofür wir das Gleichheitszeichen und den Anfangswert für die Variable angeben. Für jetzt und stunde haben wir dies bereits gemacht. Tag-und-Nacht-Skript 11

24 Links Die Seite anzeigen Groß- und Kleinschreibung In JavaScript berücksichtigen die Variablennamen (und die Funktionsnamen) die Groß- und Kleinschreibung. So verweisen z.b. jetzt und Jetzt auf zwei verschiedene Variablen. Haben Sie eine Variable gesetzt, müssen Sie darauf achten, dass Sie immer mit demselben Namen auf sie verweisen. Haben wir die aktuelle Uhrzeit einmal ermittelt, müssen wir jetzt etwas damit anfangen. Der einzige Zweck dieses Skripts besteht darin, mittels dieser Information den passenden Inhalt anzuzeigen (oder»auszugeben«, wie die Programmierer sagen). Damit kommen wir zu einer der nützlichsten Verwendungsmöglichkeiten von Java- Script: zu der Möglichkeit, HTML-Code direkt auf einer Webseite auszugeben. Hierfür verwenden wir die Methode document.write( ): document.write("<img height='150px' width='250px' src='foto-tag.jpg'/>"); Alles, was im Aufruf von document.write( ) innerhalb der doppelten Anführungszeichen steht, wird auf der Seite ausgegeben. Dieses Beispiel gibt den HTML-Code aus, der das Bild anzeigt; auf die gleiche Art können Sie jedoch jeden Text oder HTML-Code ausgeben, also auch Tabellen, Formulare oder irgendetwas anderes. Im Laufe dieses Buchs werden Sie feststellen, dass ein Großteil der Arbeit mit Java- Script mit Funktionen und Methoden zu tun hat. In JavaScript ist eine Funktion einfach ein Name für eine Gruppe von Anweisungen an den Webbrowser. Die Methoden unterscheiden sich davon nur in einem Detail; Einzelheiten dazu finden Sie im Kasten»Objekte, Eigenschaften und Methoden«weiter unten in diesem Kapitel. Einige Methoden wie z.b. document.write( ) sind in JavaScript integriert; in diesem Buch werden wir sehr viele integrierte Methoden verwenden. Außerdem können Sie in JavaScript eigene Funktionen definieren, was wir in Kapitel 2 besprechen werden. Das Gelernte zusammenfügen Nun wissen Sie zwei Dinge: wie Sie die aktuelle Uhrzeit in Stunden bekommen und wie Sie die Seite ausgeben. Aber wie können Sie diese beiden Dinge so kombinieren, dass anhand der Uhrzeit der passende Inhalt ausgegeben wird? Hierfür verwenden Sie die sogenannte if-anweisung. Das Grundkonzept der if-anweisung ist sehr einfach:»wenn diese Bedingung wahr ist, dann mache Folgendes.«In JavaScript sieht die einfachste Form der if-anweisung so aus: if ( dies wahr ist ) { führe diesen Code aus } 12 Kapitel 1: Einstieg in JavaScript

25 Rechts Einige Kommentare Kommentare ermöglichen es Ihnen, Beschreibungen des Codes direkt in diesen einzufügen. Kommentare sind in zweierlei Hinsicht nützlich: Sie erinnern Sie selbst daran, was Ihr Code macht, und sie helfen anderen Skriptautoren, die Ihren Code lesen. In großen Skripten oder Skripten, die von vielen Personen verwendet und bearbeitet werden, sind Kommentare unverzichtbar. Außerdem sind sie nützlich, wenn man einige Codezeilen vorübergehend deaktivieren möchte, während man ein Skript prüft. In diesem Buch werden wir mit Hilfe der Kommentare Code beschreiben und besprechen. Es gibt zwei Arten von JavaScript-Kommentaren: einzeilige und Blockkommentare. Einzeilige Kommentare bestehen aus einer einzigen Zeile: // Dies ist ein einzeiliger Kommentar. Die beiden Schrägstriche (//) zeigen an, dass dies ein Kommentar ist. Alles, was hinter // folgt, wird ignoriert. Einzeilige Kommentare können auch in derselben Zeile stehen wie echter Code: var jetzt = new Date() // Erzeuge ein Date-Objekt. Da Blockkommentare mehrere Zeilen umfassen können, bestehen sie aus einem öffnenden (/*) und einem schließenden Zeichen (*/): /* Dieser Kommentar umfasst mehrere Zeilen. */ Alles, was zwischen /* und */ steht, wird ignoriert. Außerhalb des script-tags können wir auch HTML-Kommentare verwenden:  Nun wissen Sie, dass unser Verfahren, JavaScript-Code vor sehr alten Browsern zu verstecken, sowohl HTML- als auch JavaScript-Kommentare verwendet. Der Kommentar, der das Verstecken einleitet, ist ein einfacher HTML-Kommentar. Der schließende Kommentar verbindet hingegen einen JavaScript-Kommentar mit einem HTML-Kommentar (//-->). Da der schließende HTML-Kommentar (-->) selbst kein zulässiger JavaScript-Code ist, müssen wir davor einen zusätzlichen Java- Script-Kommentar (//) einfügen, damit auf keinen Fall ein JavaScript-Fehler generiert wird. Dieser Code sieht wie zergliederter englisch-deutscher Text aus, und das nicht ohne Grund: Immerhin ist auch JavaScript eine Sprache. Jede if-anweisung besteht aus dem Wort if, dem eine in runde Klammern gesetzte Anweisung sowie ein in geschweifte Klammern gesetzter Codeblock folgen. Die runden Klammern enthalten die Bedingung, die geprüft werden soll, und die geschweiften Klammern enthalten den Code, der ausgeführt wird, falls die Bedingung erfüllt ist. Betrachten Sie z.b. den folgenden Code: Tag-und-Nacht-Skript 13

26 if (stunde > 22) { document.write("es wird langsam spät!"); } Ist die Variable stunde größer als 22, was bedeutet, dass es später als 22:00 Uhr ist (Stunden werden entsprechend der 24-Stunden-Uhr angegeben), gibt der Code eine Nachricht mit der Uhrzeit aus. Eine if-anweisung kann auch einen else-abschnitt mit Code enthalten, der ausgeführt wird, falls die Bedingung nicht erfüllt ist: if ( dies zutrifft ) { dann führe diesen Code aus } else { führe diesen Code aus } Dieses Format verwenden wir im Tag-und-Nacht-Skript, wenn wir die Uhrzeit prüfen und das Bild und den Text anzeigen lassen, die der Tageszeit angemessen sind. Zwischen 0:00 und 16:00 Uhr zeigen wir das Tagesbild und zwischen 16:00 und 0:00 Uhr das Nachtbild. Der folgende Code zeigt eine vereinfachte Version des Codes aus Beispiel 1-3: if (stunde >= 0 && stunde <= 16) { document.write("<image src='foto-tag.jpg'/>"); } else { document.write ("<image src='foto-nacht.jpg'/>"); } Die erste Zeile besagt:»falls der Wert der Variablen stunde größer gleich 0 und kleiner gleich 16 ist, dann führe den Code in den geschweiften Klammern aus.«das Größer-gleich-Zeichen (>=) und das Kleiner-gleich-Zeichen (<=) kennen Sie wahrscheinlich noch aus dem Mathematikunterricht; die beiden kaufmännischen Und- Zeichen (&&) bedeuten»und«. Was geschieht, wenn es 19:00 Uhr ist? Da wir nicht auf diese Uhrzeit prüfen, trifft hier die else-anweisung zu. Mit else sagen wir:»falls die Bedingung nicht wahr ist, dann mache stattdessen Folgendes.«Falls es 19:00 Uhr ist, ist es nicht zwischen 0:00 und 16:00 Uhr, und das Skript führt den Code aus, der dem Wort else folgt. In unserem Fall gibt der Code also das Nachtbild und den passenden Text aus. Dokumenteigenschaften Nachdem Sie nun die Logik von if und else verstanden haben, wollen wir uns den tatsächlichen Code für diese Seiten ansehen. Beachten Sie, dass beide nicht nur unterschiedliche Bilder und Texte aufweisen, sondern auch verschiedene Hintergrund- und Textfarben. Links 14 Kapitel 1: Einstieg in JavaScript

27 Rechts In den Stunden zwischen 0 und 16 setzt das Skript die Hintergrundfarbe auf Weiß und die Textfarbe auf Schwarz, zeigt das Bild foto-tag.jpg an und gibt den Text über den Kaffeegenuss aus. Liegt die Stunde nicht zwischen 0 und 16, weist die else- Anweisung das Skript an, die Hintergrundfarbe auf Schwarz und die Textfarbe auf Weiß zu setzen, das Bild foto-nacht.jpg anzuzeigen und den Text über ein gutes Abendessen auszugeben. Um die Farben zu ändern, müssen wir zwei Eigenschaften der aktuellen Webseite setzen. JavaScript bezeichnet diese Seite als das document-objekt. Die Eigenschaften des document-objekts beschreiben verschiedene Merkmale des Objekts. Wenn wir der Eigenschaft document.bgcolor einen hexadezimalen Wert zuweisen, wird die Hintergrundfarbe geändert, und mit document.fgcolor ändern wir die Textfarbe. Die Hintergrundfarbe können Sie jederzeit ändern, solange das Dokument existiert. In einigen Browsern kann die Eigenschaft für die Textfarbe jedoch nur beim Laden des Dokuments gesetzt werden. Sobald das Dokument angezeigt wird, sollten Sie diese Eigenschaft daher am besten unverändert lassen. Wie Sie die Farbe und das Erscheinungsbild von Text ad hoc ändern, erfahren Sie in Kapitel 7. Der JavaScript-Baum Das document-objekt und seine Eigenschaft bgcolor sind durch einen Punkt voneinander getrennt. document.bgcolor verweist also auf die Eigenschaft für die Hintergrundfarbe des Dokuments. Das scheint zwar sehr einfach zu sein, aber worauf verweist dann dies: document.mailformular.adresse.value Es verweist auf den value des Elements adresse eines Formulars namens mailformular, das sich im document befindet. Alles klar? Einfacher wird es, wenn Sie sich diese Struktur als einen Baum vorstellen. Im Allgemeinen ordnet JavaScript alle Teile des Browserfensters und alle Elemente einer Seite (z.b. Formulare und Bilder) wie einen Baum an. Zuerst kommt ein Hauptobjekt (der Stamm), dann die Objekte, die vom Hauptobjekt abzweigen (die Äste), und schließlich die Methoden und Eigenschaften an diesen Objekten (die Blätter). Wie Sie in späteren Kapiteln sehen werden, lautet der Terminus technicus für diese Struktur Document Object Model (DOM), aber im Moment soll der Vergleich mit einem Baum das Verständnis erleichtern. Fortsetzung Tag-und-Nacht-Skript 15