reillys ajax javascript - download.e-bookshelf.de filewebdesign mit javascript & ajax nick...

o’r

ei

ll

ys

b

as

ic

s Webdesign mit

JavaScript➜ Praktische Einführung in JavaScript

➜ Moderner Einsatz von interaktiven Elementen

➜ Mit zwei Ajax- Beispielanwendungen

Nick Heinle, Bill Peña & Ulrich Speidel

2. Auflage

& Ajax

Beijing · Cambridge · Farnham · Köln · Paris · Sebastopol · Taipei · Tokyo

Webdesign mit JavaScript & Ajax

Nick Heinle, Bill Peña &Ulrich Speidel

2. AUFLAGE

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 VerlagBalthasarstr. 8150670 KölnTel.: 0221/9731600Fax: 0221/9731608E-Mail: [email protected]

Copyright:© 2006 by O’Reilly Verlag GmbH & Co. KG1. Auflage 20022. Auflage 2006

Die Darstellung von R2D2 im Zusammenhang mitdem Thema JavaScript ist ein Warenzeichen des O’Reilly Verlags.

Bibliografische Information Der Deutschen BibliothekDie Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.ddb.de abrufbar.

Lektorat: Inken Kiupel, KölnFachgutachten: Denny Carl, BerlinKorrektorat: Sibylle Feldmann, DüsseldorfSatz: DREI-SATZ, HusbyUmschlaggestaltung: Michael Oreal, KölnProduktion: Andrea Miß, KölnBelichtung, Druck und buchbinderische Verarbeitung: Druckerei Kösel, Krugzell; www.koeselbuch.de

ISBN-10 3-89721-471-7ISBN-13 978-3-89721-471-2

Dieses Buch ist auf 100% chlorfrei gebleichtem Papier gedruckt.

This is the Title of the Book, eMatter EditionCopyright © 2007 O’Reilly & Associates, Inc. All rights reserved.

First

Max.Linie

Max.Linie

| V

Inhalt

Vorwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . VII

1 Einstieg in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Eigene Vor- und Zurück-Buttons nutzen . . . . . . . . . . . . . . . . . . . . . . . . . . 1Beschreibende Links einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4Tag-und-Nacht-Skript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2 Mit Fenstern arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23Grundlagen bei der Arbeit mit Fenstern . . . . . . . . . . . . . . . . . . . . . . . . . . . 23Neue Fenster öffnen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26Mit Fernbedienungsfenstern arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

3 Formulare und Validierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Einführung in Formulare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Madlibs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45Die Formulareingabe überprüfen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51Ist das wirklich Ihre E-Mail-Adresse? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55Überprüfungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

4 Ordnung durch Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69Was sind Arrays? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69Werden Sie unberechenbar! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70Das Datum richtig angeben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74Auswahlmenüs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

5 Browser und Plugins erkennen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83Mit welchem Browser haben wir es zu tun? . . . . . . . . . . . . . . . . . . . . . . . . 84Plugins ermitteln . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86Das Betriebssystem ermitteln . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92


Links

Max.Linie

Max.Linie

VI | Inhalt

6 Eine Site mit Hilfe von Cookies anpassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Was ist ein Cookie? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Einfache Cookie-Operationen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96Ein Willkommensgruß an neue Besucher . . . . . . . . . . . . . . . . . . . . . . . . . 102Formulare, die sich erinnern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107Benutzerdefinierte Seiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

7 Dynamic HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119Was ist DHTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119Das Document Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120Dynamische Cascading Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122Mit Layern vertraut werden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129Browsererkennung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

8 Interaktive DHTML-Verfahren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141Drop-down-Menüs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141Gleitende Register . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145Layer mit eingeschränktem Anzeigebereich scrollen . . . . . . . . . . . . . . . . . 149

9 Anwendungen für Fortgeschrittene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157Objektorientiertes Skripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157Testen Sie Ihre Leser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163Relationale Menüs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173Weiterführende Informationen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

10 Einfaches Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183Wozu eigentlich Ajax? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183HTTP-Requests mit JavaScript-Objekten . . . . . . . . . . . . . . . . . . . . . . . . . 184Eine einfache Chat-Anwendung mit Ajax . . . . . . . . . . . . . . . . . . . . . . . . . 191

11 Ajax und XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199Eine Schach-Anwendung mit Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199Das Design des Schachspiels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204Die Implementierung auf der Clientseite . . . . . . . . . . . . . . . . . . . . . . . . . . 213Das serverseitige Skript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

A Häufig verwendete JavaScript-Objekte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227

B Event-Handler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

C Stileigenschaften . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237

D JavaScript-Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

| VII

First

Max.Linie

Max.Linie

Hier Mini IVZ eingeben!

Abstand untere Tabellenlinie zu Textanfang 1,8 cm-> also: manuell auf den Arbeitsseiten ziehen!!!

Erstellen auf denArbeitsseiten(siehe Muster)

Vorwort

Am Anfang war HTML, und es war gut. HTML (HyperText Markup Language)ermöglichte es Webautoren, strukturierte Seiten mit Bildern, Text und Hyperlinkszu erstellen. HTML war – und ist – ein Format, das sich gut für die verständlicheund ansprechende Darstellung statischer Informationen eignet. Den Webautorenwurde jedoch bald klar, dass HTML allein nicht ausreicht. Als das Internet belieb-ter wurde, wurden auch Interaktivität und unmittelbares Feedback notwendig.

Im Dezember 1995 veröffentlichte Netscape (damals Mosaic) mit JavaScript eineLösung für einige der mit statischem HTML verbundenen Probleme und Beschrän-kungen. JavaScript wurde als einfache und effiziente Skriptsprache für das Internetmit enger Anbindung an HTML entworfen. Im Gegensatz zu anderen damals ver-fügbaren Programmiersprachen, wie Java, C, C++ oder Perl, wurde JavaScriptdirekt in den Webbrowser integriert und arbeitete mit HTML zusammen.

Heute ist JavaScript neben HTML/XHTML, Cascading Style Sheets (CSS), XMLund dem Document Object Model (DOM) einer der Schlüsselstandards, auf denendas 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 interessan-tere Websites erstellen kann. Der Zweck von JavaScript besteht darin, HTML inter-aktiv zu machen und damit die Einbindung von Anwenderdialogen und Feedback,Multimedia und Animationen zu ermöglichen. JavaScript ist unter anderem aus denfolgenden 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ächeanklickt oder die Maus über einen Link bewegt. Die Event-Handler von JavaScript

VIII | Vorwort

Links

Max.Linie

Max.Linie

können dann als Reaktion auf diese Aktionen Code ausführen und es den Web-seiten damit ermöglichen, im Browser mit Formulardaten zu arbeiten, wenn eineSchaltflä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 HTMLdefinierte Objekte steuern, entfernen und hinzufügen. So lassen sich beispielsweisedie Inhalte einer Tabellenzelle austauschen oder eine Liste sortieren. Das DocumentObject Model definiert, welche Objekte JavaScript auf einer Webseite steuern kannund wie es sie ansprechen kann. Dadurch können Sie JavaScript bei der Erstellungleistungsfähiger webbasierter Mulitmedia-Anwendungen einsetzen.

Nicht-HTML-Objekte: Dank der Nicht-HTML-Objekte hat JavaScript Zugriff aufTeile des Browsers, die nichts mit HTML-Code zu tun haben, der auf Webseitenangezeigt wird. So kann JavaScript z.B. ermitteln, welcher Browser verwendet wird,auf welchem Betriebssystem dieser ausgeführt wird und sogar, welche Plugins imBrowser installiert sind. Außerdem kann JavaScript auf Browser-Cookies zugreifen,so dass es – mit einigen Einschränkungen – Informationen über lange Zeit hinwegim Browser speichern kann. Mehr noch: JavaScript kann sich zusätzliche Informati-onen von einem Webserver besorgen und diese in das angezeigte Dokument ein-bauen – diese Technik ist inzwischen unter dem Namen Ajax bekannt.

Was bringt Ajax?Ajax (Asynchronous JavaScript and XML) ist im Grunde genommen keine neueTechnologie, sondern lediglich eine leistungsfähige Mischung etablierter Kompo-nenten: JavaScript, einer serverseitigen Programmiersprache wie z.B. PHP, JSP,oder ASP.net, und XML zur standardisierten Formatierung der Daten, die zwischenden beiden ausgetauscht werden. Diese Kommunikation läuft asynchron ab.

Mit etwas Erfahrung im Websurfen werden Sie das folgende Problem kennen: Siehaben sich eine umfangreiche Webseite heruntergeladen, z.B. eine lange Liste mitE-Mails auf Ihrem Webmail-Portal. Dann möchten Sie eine der Mails als Spamlöschen. Klar, das geht, aber wenn Sie eine frische Liste ohne die Spam-Mail (aberdafür vielleicht mit inzwischen neu eingetroffenen Mails) wollen, mussten Sie bis-her die gesamte Liste neu laden.

Dank Ajax geht das inzwischen auch etwas einfacher: Die JavaScript-Komponenteeiner Ajax-Webmail-Applikation fängt Ihre Aktion ab (das Drücken des Lösch-But-tons 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. DerServer schickt eine – oft XML-codierte – Antwort zurück, in der sämtliche Ände-rungen der Liste enthalten sind. Diese Antwort geht direkt an JavaScript, wird dortdekodiert und über DOM zum Aktualisieren der bereits im Browser vorhandenden

Vorwort | IX

Rechts

Max.Linie

Max.Linie

Liste verwendet. Das spart Bandbreite und Zeit, weil weniger Informationen ausge-tauscht werden müssen.

Beim Lesen dieses Buchs werden Sie erkennen, dass Sie kein Informatik-Diplombenötigen, um mit JavaScript umzugehen oder mit Ajax zu arbeiten. SowohlAnwendungsdesigner als auch Programmierer können mit JavaScript und AjaxWebsites erstellen. Dies ist der eigentliche Grund, warum JavaScript so wichtig ist!

Besuchen Sie unbedingt auch die Website zu diesem Buch unter derAdresse http://www.oreilly.de/catalog/designjsbas2ger/. Dort könnenSie alle Beispiele zu diesem Buch herunterladen, damit Sie sie in Ihreeigenen Webseiten einbauen können.

Für wen ist dieses Buch gedacht?Dieses Buch wurde für Webautoren und Webdesigner entworfen, die lernen möch-ten, wie sie ihre Webseiten mit JavaScript und Ajax verbessern können. Es sollnützliche und gebräuchliche Beispiele für JavaScript-Code bei der Arbeit zeigen undzugleich die Konzepte und die Syntax dieser Skriptsprache vermitteln. Die Beispielesind so entworfen, dass sie direkt in Webseiten eingebaut werden können. Daherkonzentrieren sich die Erklärungen auf die wesentlichen Merkmale und bespre-chen, wie man die Skripte an individuelle Bedürfnisse anpassen kann. Dieses Buchist für Webdesigner und Programmierer gleichermaßen geschrieben, spricht wegenseiner praktischen und realitätsnahen Anwendungen die Designer und Nicht-programmierer möglicherweise aber mehr an als die meisten anderen Bücher überJavaScript.

Das Buch setzt Grundkenntnisse in Webdesign und in einfachem HTML voraus.Falls Sie noch keinerlei Erfahrung mit dem Internet haben, sollten Sie sich zunächstmit diesen Themen befassen, bevor Sie JavaScript zu lernen versuchen. Dafür emp-fehlen wir Ihnen die Bücher HTML mit CSS & XHTML von Kopf bis Fuß sowieHTML und XHTML: Das umfassende Referenzwerk. Beide Bücher sind bei O’Reillyerschienen. Im Zusammenhang mit Ajax möchten Sie sich vielleicht auch in PHPeinarbeiten, dazu empfehlen wir PHP5 - ein praktischer Einstieg von Ulrich Günther(der unter seinem ehelichen Namen Speidel auch an der neuen deutschen Versiondes vorliegenden Buchs mitgewirkt und die beiden letzten Kapitel beigesteuert hat).

Die Themen in diesem BuchDieses Buch enthält die folgenden elf Kapitel:

• Kapitel 1, Einstieg in JavaScript, zeigt drei einfache JavaScript-Beispiele, so dassSie direkt damit beginnen können, Ihre Webseiten attraktiver zu gestalten.

X | Vorwort

Links

Max.Linie

Max.Linie

• Kapitel 2, Mit Fenstern arbeiten, erläutert, wie man Fenster steuert, erstellt undanspricht, da sich auf einer Webseite alles in einem Fenster abspielt.

• Kapitel 3, Formulare und Validierung, erklärt, wie Sie mit Hilfe von JavaScriptmit Formularelementen interagieren, also z.B. Formulardaten validieren.

• Kapitel 4, Ordnung durch Arrays, führt die Arrays ein, die für die Organisationvon Informationen hervorragend geeignet sind, und zeigt, wie Sie Ihre Web-seiten mit Arrays verbessern können.

• Kapitel 5, Browser und Plugins erkennen erklärt, wie Sie mit JavaScript Infor-mationen über den Webbrowser einholen, mit dem ein User Ihre Websitebesucht. Im nächsten Schritt erfahren Sie, wie Sie Ihren JavaScript-Code fürden Browser des Users optimieren.

• Kapitel 6, Eine Site mit Hilfe von Cookies anpassen, erklärt, wie man mit Java-Script Cookies erstellen kann, um die Besucher der Website zu beobachten.

• Kapitel 7, Dynamic HTML, erläutert in Grundzügen, wie man JavaScript mitden W3C-Standards DOM und CSS kombinieren kann, um auf einer Webseiteeine Vielzahl von dynamischen Effekten zu erzeugen.

• Kapitel 8, Interaktive DHTML-Verfahren, setzt die Beschreibung von DynamicHTML fort und zeigt einige komplexe, interaktive Beispiele.

• Kapitel 9, Anwendungen für Fortgeschrittene, hilft Ihnen dabei, Ihre Skriptenleichter nachvollziehbar und effizienter zu gestalten.

• Kapitel 10, Einfaches Ajax, zeigt Ihnen, wie Sie Ajax auch ohne XML-Kennt-nisse nutzen können.

• Kapitel 11, Ajax und XML, lädt Sie zu einem Schachspiel als Beispiel für einekomplexere Anwendung ein, in der das X in Ajax und eine ganze Menge ande-rer fortgeschrittener Techniken zum Einsatz kommen.

Darüber hinaus enthält das Buch vier Anhänge mit nützlichem Referenzmaterial fürdie Arbeit mit JavaScript.

KonventionenIn diesem Buch werden die folgenden typographischen Konventionen verwendet:

KursivschriftKennzeichnet Fachbegriffe, die definiert werden, URLs, E-Mail-Adressen, Da-tei- und Verzeichnisnamen und dient der Hervorhebung.

NichtproportionalschriftKennzeichnet Codebeispiele und HTML-Tags, -Attribute sowie JavaScript-Ele-mente innerhalb des Textes.

Vorwort | XI

Rechts

Max.Linie

Max.Linie

Nichtproportionalschrift fettDient der Hervorhebung in Codebeispielen.

Nichtproportionalschrift kursivKennzeichnet in HTML-Attributen und JavaScript-Ausdrücken Platzhalter fürWerte.

Die Glühbirne kennzeichnet einen Tipp oder einen generellen Hin-weis mit nützlichen Zusatzinformationen zum Thema.

Der Regenschirm kennzeichnet eine Warnung oder ein Thema, beidem Sie Vorsicht walten lassen sollten.

In Kästen mit einem Mikroskop wird ein Thema genauer unter dieLupe genommen.

BeispielskripteDie in diesem Buch verwendeten Skripte finden Sie auf der Website des O’ReillyVerlags unter der folgenden Adresse:

http://www.oreilly.de/catalog/designjsbas2ger/


| 1

First

Max.Linie

Max.Linie

Hier Mini IVZ eingeben!

Abstand untere Tabellenlinie zu Textanfang 1,8 cm-> also: manuell auf den Arbeitsseiten ziehen!!!

Erstellen auf denArbeitsseiten(siehe Muster)

Kapitel 1SDiving into JavaScript KAPITEL 1

Einstieg in JavaScript

Falls Sie bereits andere Bücher über JavaScript gelesen haben, mussten Sie vielleichtzuerst endlose Seiten über Funktionen, Methoden, Operatoren usw. lesen, bevorSie erfuhren, wie Sie ein ganz einfaches Skript schreiben. Wenn Sie JavaScript ersteinmal besser kennen, müssen Sie diese und weitere Konzepte natürlich verstehen,aber Sie können Ihre Webseiten auch schon attraktiver gestalten, wenn Sie einfachdirekt in JavaScript einsteigen.

Genau darum geht es in diesem Kapitel, an dessen Ende Sie bereits zwei praktischeSkripte kennen werden: eines, mit dem Sie der Statuszeile beschreibende Kommen-tare hinzufügen, und eines, mit dem Sie den Besuchern Ihrer Website der Tageszeitangepasste 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 nutzenSicherlich kennen Sie diese Situation: Sie arbeiten sich durch eine Website undlesen z.B. eine Dokumentation. Sie sind auf einer interessanten Seite angekommenund folgen einem Link auf eine andere Seite. Nachdem Sie die Seite inspizierthaben, möchten Sie aber so schnell wie möglich wieder zur vorhergehenden Seite,

In diesem Kapitel:

• Eigene Vor- und Zurück-Buttons nutzen

• Beschreibende Links einfügen• Tag-und-Nacht-Skript


2 | Kapitel 1: Einstieg in JavaScript

Links

Max.Linie

Max.Linie

etwa weil Sie dort weitere Texte lesen wollen. Wieder auf der ursprünglichen Seiteangelangt, wollen Sie kurz noch einmal etwas auf der eben besuchten Seite nachse-hen. Um zwischen den Seiten hin- und herzuspringen, können Sie natürlich dieVor- und Zurück-Buttons Ihres Browsers verwenden. Das ist aber mühsam, weil SieIhre Maus und Ihre Aufmerksamkeit erst einmal aus dem Browserdokument herausauf die gewünschten Buttons lenken müssen. Mit JavaScript geht das alles einfa-cher, indem Sie die Buttons direkt im Dokument platzieren. Dazu müssen Sie denfolgenden 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 inVerbindung mit JavaScript zur Anwendung kommen. Im Gegensatz zu Schaltflä-chen des Typs submit oder reset, die fest vorgegebene Funktionen haben, müssenSie diese Buttons selbst verdrahten. Diese Verdrahtung geht über die onclick-Event-Handler der Buttons.

Events und Event-HandlerEin Event-Handler ist Code, der dann ausgeführt wird, wenn ein Event (ein Ereig-nis) auftritt. Was ist ein Event? Es ist etwas, das geschieht: Der Anwender klickt mitder 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, wennmit der Maus auf den Button geklickt wird. Da sich die Event-Handler in den jewei-ligen Buttons befinden, treten die Events nur dann auf, wenn der Mauszeiger beimKlicken ü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 verwendeteEvent-Handler auf, die JavaScript unterstützt, die Tags, in denen sie verwendet wer-den 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ächen-element anklickt.


Eigene Vor- und Zurück-Buttons nutzen | 3

Rechts

Max.Linie

Max.Linie

Der Code, der onclick folgt, wird ausgeführt, wenn das Event auftritt (in diesemFall also, wenn Sie mit der Maus auf den Button klicken). Achten Sie darauf, dasshinter onmouseover unbedingt ein Gleichheitszeichen (=) folgt. Das Gleichheitszei-chen besagt: »Wenn onmouseover auftritt, dann führe den folgenden Code aus.« DerCode, der dann folgt, muss in doppelte Anführungszeichen eingeschlossen sein,damit der Handler weiß, welchen Code er ausführen soll (den gesamten Codeinnerhalb der Anführungszeichen, nichts anderes). Um es in der Sprache der Pro-grammierer auszudrücken: Das Gleichheitszeichen weist dem Event-Handler einenWert zu. Natürlich sollte Ihnen dieses Konzept bereits bekannt sein, da Sie dasGleichheitszeichen in HTML ständig dazu verwenden, Attributen Werte zuzuwei-sen (z.B. <a href="seite.html">).

Eingebaute JavaScript-Objekte, Funktionen und MethodenDer JavaScript-Code, den wir dem Event-Handler als Wert zuweisen, ist zwar sehrkurz, macht uns aber gleich mit einem Objekt namens history bekannt. In diesemObjekt speichert der Browser des Benutzers eine bestimmte Anzahl Seiten ab, diezuletzt besucht worden sind.

Neben dem Speicher für die bereits besuchten Seiten verfügt dieses Objekt aberauch über einige eingebaute Funktionen, mit denen diese Daten verarbeitet werdenkönnen. Solche eingebauten Funktionen nennt man (Objekt-)Methoden, und wirlernen hier gleich zwei kennen: history.forward() und history.back(). Der Punktin der Syntax der Methoden dient dazu, JavaScript mitzuteilen, dass es dieseMethoden im history-Objekt finden kann, und die Klammern geben an, dass essich um Methoden handelt. Mit history.forward() simuliert JavaScript einen Klickauf den Vorwärts-Button des Browsers, mit history.back() einen Klick auf denZurü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 undein weiteres Objekt kennen, zusammen mit etwas komplizierterer JavaScript-Syn-tax.

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.

Tabelle 1-1: Von JavaScript unterstützte, gebräuchliche Event-Handler (Fortsetzung)

Event-Name Wo? Wann?



Links

Max.Linie

Max.Linie

Beschreibende Links einfügenWünschen Sie sich auch manchmal, dass Links sprechen könnten? Anders ausge-drückt: Wäre es nicht hilfreich, wenn man den Anwendern mitteilen könnte, wassie erwartet, wenn sie einen bestimmten Link anklicken? Mit JavaScript ist das ganzeinfach.

Abbildung 1-1 zeigt eine Webseite mit einem Bild des O’Reilly-Logos. Allerdingsteilt 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 Status-zeile des Browsers eine kurze Beschreibung des Links anzeigen, sobald der Anwen-der 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 unseremBeispiel ü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 bewerk-stelligen ist, zeigt Beispiel 1-1.

Der Link im Beispiel 1-1 sieht zwar wie ein normaler Link aus, funktioniert offenbaraber etwas anders. Das Tag <a> enthält ebenfalls ein kleines JavaScript-Codefrag-ment. Dieses beginnt (und der HTML-Code endet) mit onmouseover, einem anderender integrierten Event-Handler von JavaScript. Das onmouseover-Event tritt wiebereits erwähnt auf, wenn die Maus über den Link bewegt wird. Wenn Sie den

Beispiel 1-1: Mit diesem Code fügen Sie einem Link Statuszeilentext hinzu.

<a href="http://www.oreilly.de/" 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


Beschreibende Links einfügen | 5

Rechts

Max.Linie

Max.Linie

Event-Handler mit geeignetem Code verbinden, erhalten Sie einen Link, der etwasmacht, sobald man die Maus über den Link bewegt. Der Code im Beispiel 1-1 zeigtdie Beschreibung in der Statuszeile des Browsers an.

onmouseover für Links verwendenDen onmouseover-Event-Handler verwenden Sie genauso wie den onclick-Handlerim ersten Beispiel. Wir müssen uns also nur mit dem Code befassen, der danachfolgt:

"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älteinige beachtenswerte Punkte:

• Dieser Code steht in doppelten Anführungszeichen, die kennzeichnen, wo derCode beginnt und wo er endet. Auch diese Struktur sollte Ihnen bereits ver-traut sein, da man in HTML mit den doppelten Anführungszeichen denAnfang und das Ende eines Werts kennzeichnet (z.B. <a href="seite.html">).

• window.status ist die Art, wie JavaScript auf die Statuszeile verweist. Genauergesagt, verweist sie auf die Eigenschaft status des window-Objekts. Die Bedeu-tung dieser Begriffe werden wir weiter unten in diesem Kapitel besprechen.

• Mit dem Gleichheitszeichen wird window.status hier ein Wert zugewiesen. Die-ser Wert ist die Zeichenkette, die angezeigt werden soll.

• Der Text hinter dem Gleichheitszeichen ist in einfache Anführungszeichengefasst. Auch hier geben wir mit den Anführungszeichen wieder den Anfangund das Ende des Werts an, wobei wir statt der doppelten jedoch einfacheAnführungszeichen verwenden. Der Grund hierfür ist, dass der Text innerhalbder in doppelte Anführungszeichen gefassten JavaScript-Zeichenkette steht.Verwendeten wir für die Beschreibung dieses Links nun ebenfalls doppelteAnführungszeichen, müsste der JavaScript-Interpreter annehmen, dass derJavaScript-Code mit dem zweiten doppelten Anführungszeichen endet. WennSie eine Zeichenkette in eine andere einfügen, müssen Sie immer zwischen dop-pelten und einfachen Anführungszeichen wechseln.

• Das Semikolon hinter dem Beschreibungstext kennzeichnet das Ende einerJavaScript-Zeile. Gewöhnen Sie sich an den Anblick der Semikola: Beinahe jedeJavaScript-Zeile endet mit einem Semikolon.



Links

Max.Linie

Max.Linie

Knifflige DetailsDirekt vor einem Apostroph innerhalb einfacher Anführungszeichenmüssen Sie einen Backslash (\) einfügen, also \'. Auch dies dientdazu, Verwirrung zu vermeiden, da der Apostroph und das einfacheAnfü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 davonabhalten, in der Statuszeile wie üblich die URL anzuzeigen. Würden diese Wörterfehlen, könnte der Anwender unsere Nachricht in der Statuszeile niemals sehen, dasie sofort durch die URL überschrieben würde. Dieses return werden wir weiterunten in diesem Buch bei mehreren Skripten ausführlich besprechen.

Um dieses Skript in Ihrer Website zu verwenden, ersetzen Sie den Text zwischenden 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, dassder Text in der Statuszeile nicht direkt wieder verschwindet, wenn Sie die Mausvom Link wegbewegen. Um dieses Problem zu lösen, müssen wir dem Link einenzweiten Event-Handler hinzufügen, und zwar einen für onmouseout-Events.Beispiel 1-2 zeigt diesen Event-Handler.

Der Code für den Event-Handler onmouseout setzt window.status einfach auf eineleere Zeichenkette (''). Der Event-Handler onmouseout wird ausgelöst, sobald sichdie Maus vom Link wegbewegt, und löscht den Text aus der Statuszeile.

Beispiel 1-2: Verbesserter Code, um einem Link Statuszeilentext hinzuzufügen

<a href="http://www.oreilly.de/" 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>

Meine Statuszeile ändert sich nicht! Was ist los?Es ist kaum zu glauben, aber mit Statuszeilentext kann man Sie unter Umständenganz schön reinlegen. Der beliebteste Trick ist, Ihnen per Statuszeile eine falscheURL unterzujubeln. Wenn Sie die Statuszeile nicht über JavaScript ändern, wirdIhnen dort die URL angegeben, auf die der Link zeigt. Nun kommt es leider gele-gentlich vor, dass unehrliche Provider mit ihrem JavaScript-Code die Statuszeile miteiner vorgetäuschten URL überschreiben, z.B. so:


Tag-und-Nacht-Skript | 7

Rechts

Max.Linie

Max.Linie

Tag-und-Nacht-SkriptNun werden Sie Ihr erstes echtes Skript schreiben; dafür müssen Sie einige neueBegriffe 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. Weildas erste Beispiel JavaScript einbaute, war es eher ein erweitertes <a>-Tag als einwirkliches Skript. Das zweite Beispiel ist komplexer.

Da die Anwender beim Surfen im Internet zu verschiedenen Tageszeiten unter-schiedliche 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 unddas Mittagsmenü anzeigen und abends das jeweilige Dinnermenü. Die Abbildungen1-2 und 1-3 zeigen zwei mögliche Seiten.

<html><head><title>Gefälschter Statuszeilentext</title></head><body><a href="http://www.boesewichter.org/" onmouseover="window.status = 'http://www.oreilly.de'; return true;" onmouseout="window.status = '';"><img border="0px" src="oreilly.gif"/></a></body></html>

Damit sieht alles nach einem reibunglosen Transfer zu einem renommierten Com-puterverlag aus, aber stattdessen landen Sie auf einer Site, die von einer ganz ande-ren Organisation betrieben wird. Mit etwas Glück erwartet Sie dort nur verwirrendeWerbung, aber es könnte genauso gut eine gefälschte Version der O’Reilly-Home-page sein, über deren angeblichen Onlineshop Sie Ihre Kreditkartendaten fürBücher loswerden, die Sie nie geliefert bekommen.

Aus diesem Grund ist es inzwischen nicht mehr selbstverständlich, dass Ihr Browsereine Änderung des Statuszeilentexts zulässt. Mozilla Firefox beispielsweise müssenSie 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 freundli-che Unterstützung über die Statuszeile anbieten, liegt in der zunehmenden Verbrei-tung von Content-Management-Systemen. Sie verlangen ihren Redakturen – denje-nigen, die Inhalte ins Web stellen – aus Gründen der Einfachheit nicht immer einenStatuszeilentext ab. Das braucht für Sie aber noch lange kein Grund zu sein, Ihreneigenen Benutzern diese freundliche Geste zu verweigern!



Links

Max.Linie

Max.Linie

Wie macht man dies nun mit JavaScript? Kurz gesagt: Ein Skript prüft die Tageszeitund liefert dann den Tages- oder den Nacht-HTML-Code. In diesem kleinen Skriptwerden wir mehrere Begriffe klären:

• das Date- und das document-Objekt

• Variablen

• Eigenschaften und Methoden

• die if -Anweisung

Abbildung 1-2: Eine »Tag«-Seite

Abbildung 1-3: Eine »Nacht«-Seite

Rechts

Max.Linie

Max.Linie

Beispiel 1-3 zeigt den Code für eine Seite, die je nach Tageszeit unterschiedlicheInhalte darstellt. Im Anschluss an das Listing werden wir den Code ausführlichererklären.

Das script-TagAlle Skripten beginnen und enden mit dem gleichen Element: dem Tag script. DasHTML-Dokument in Beispiel 1-3 ist im Grunde ein einziges großes script-Tag; derBody des Dokuments enthält keinerlei anderen Inhalt. Die Syntax sieht folgender-maßen aus:

<script language="JavaScript">

Der Browser betrachtet alles, was sich innerhalb des script-Tags befindet, als reinenJavaScript-Code und nichts anderes. An dieser Stelle werden sich die meisten IhrerSkripten befinden. script-Tags kann man an jeder Stelle eines HTML-Dokumentseinfügen, im Kopf ebenso wie im Body. In diesem Fall haben wir das script-Tag dorteingefügt, wo das Skript eine Seite ausgibt: im Body. In anderen Dokumenten werdenSie Funktionen sehen, die in einem script-Tag im Kopf des Dokuments definiert sindund dann an anderen Stellen der Seite in anderen script-Tags aufgerufen werden.

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>



Links

Max.Linie

Max.Linie

Vielleicht fragen Sie sich nun: »Warum enthält das script-Tag das Attribut lan-guage?« Der Grund hierfür ist, dass JavaScript nicht die einzige Skriptsprache fürdas Internet ist. Sie können auch VBScript verwenden, eine Skriptsprache, die aufder Programmiersprache Visual Basic beruht. Allerdings wird VBScript nur vomInternet Explorer unterstützt, daher hat es lediglich einen begrenzten praktischenNutzen.

Es gibt mehrere Versionen von JavaScript, die jeweils von verschiedenen Browsernunterstü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 nurvon der Beta-Version von Firefox 2.0 unterstützt wird. Die aktuellen Browserversi-onen der letzten Jahre unterstützen JavaScript 1.3 (Internet Explorer 6), JavaScript1.5 (Opera 7 und höher) oder sogar die Version JavaScript 1.6 (Mozilla 1.5 undhöher).

Sind diese verschiedenen Versionen ein Grund zur Beunruhigung? Normalerweisenicht. Die meisten Skripten in diesem Buch verwenden Merkmale, die von allen inden letzten Jahren veröffentlichten Browsern unterstützt werden. Sofern dies nichtzutrifft, geben wir einen entsprechenden Hinweis. Falls ein Skript ein Merkmal ausder neuesten JavaScript-Version verwendet, müssen Sie an Ihrem script-Tag ledig-lich eine geringfügige Änderung vornehmen:

<script language="JavaScript1.5">

Das Date-Objekt und VariablenDer erste Teil des Tag-und-Nacht-Skripts ermittelt anhand der Systemuhr im Rech-ner des Anwenders die Tageszeit. Hierfür verwendet es das Date-Objekt, das inJavaScript integriert ist:

var jetzt = new Date( ); var stunde = jetzt.getHours( );

Separate JavaScript-DateienSpäter, wenn Sie ein JavaScript-Experte sind, sollten Sie längere Skriptengetrennt vom HTML-Dokument in eigenen Dateien speichern. Mit demAttribut 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 sinn-voll ist, sie aus dem HTML-Dokument herauszunehmen. In späteren Kapiteln wer-den wir dann allerdings diese Technik anwenden.

Rechts

Max.Linie

Max.Linie

Die erste Zeile erzeugt ein neues Date-Objekt und gibt ihm den Namen jetzt. Pro-grammierer bezeichnen jetzt als Variable und meinen damit eigentlich nur, dassdies ein Name ist, der mit einer bestimmten Information verbunden ist. Von nun ankönnen wir das aktuelle Datum und die Uhrzeit also als jetzt bezeichnen. AlsNächstes sagt das Skript: »Nimm jetzt (das aktuelle Datum und die Uhrzeit), fragees nach der aktuellen Stunde (getHours( )) und nenne die Antwort stunde.« Wie wiretwas weiter unten erläutern werden, ist getHours() eine Methode des Date-Objekts. Nun können wir auf die aktuelle Stunde also namentlich verweisen, indemwir die Variable stunde verwenden.

Woraus besteht ein Name?Ein Variablenname muss mit einem Buchstaben, Dollarzeichen oderUnterstrich beginnen. Danach können Buchstaben, Unterstriche undZiffern folgen. Die folgenden Variablennamen sind also alle zulässig:meinCan, Can1, $Can und _Can1. Diese hingegen nicht: 1Can und !Can.

Wie Sie im Tag-und-Nacht-Skript sehen, wird eine Variable mit var und demNamen der Variablen gesetzt. Sobald wir eine Variable gesetzt haben, können wirihr einen Wert zuweisen, wofür wir das Gleichheitszeichen und den Anfangswertfür die Variable angeben. Für jetzt und stunde haben wir dies bereits gemacht.

JavaScript vor sehr alten Browsern versteckenWenn 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 Web-seite als normalen Text anzeigen. Dieses Problem lässt sich mit HTML-Kommenta-ren 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 Skriptsverwenden, 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 Funktionsweisedieser 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 jedochnicht mehr verwenden, da heute eigentlich alle Browser das Tag script verstehen.



Links

Max.Linie

Max.Linie

Groß- und KleinschreibungIn JavaScript berücksichtigen die Variablennamen (und die Funktions-namen) die Groß- und Kleinschreibung. So verweisen z.B. jetzt undJetzt auf zwei verschiedene Variablen. Haben Sie eine Variablegesetzt, müssen Sie darauf achten, dass Sie immer mit demselbenNamen auf sie verweisen.

Die Seite anzeigenHaben wir die aktuelle Uhrzeit einmal ermittelt, müssen wir jetzt etwas damitanfangen. Der einzige Zweck dieses Skripts besteht darin, mittels dieser Informa-tion den passenden Inhalt anzuzeigen (oder »auszugeben«, wie die Programmierersagen).

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ührungszei-chen steht, wird auf der Seite ausgegeben. Dieses Beispiel gibt den HTML-Codeaus, der das Bild anzeigt; auf die gleiche Art können Sie jedoch jeden Text oderHTML-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 ein-fach ein Name für eine Gruppe von Anweisungen an den Webbrowser. DieMethoden unterscheiden sich davon nur in einem Detail; Einzelheiten dazu findenSie im Kasten »Objekte, Eigenschaften und Methoden« weiter unten in diesemKapitel. Einige Methoden wie z.B. document.write( ) sind in JavaScript integriert; indiesem Buch werden wir sehr viele integrierte Methoden verwenden. Außerdemkönnen Sie in JavaScript eigene Funktionen definieren, was wir in Kapitel 2 bespre-chen werden.

Das Gelernte zusammenfügenNun wissen Sie zwei Dinge: wie Sie die aktuelle Uhrzeit in Stunden bekommen undwie 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 verwendenSie die sogenannte if-Anweisung. Das Grundkonzept der if-Anweisung ist sehreinfach: »Wenn diese Bedingung wahr ist, dann mache Folgendes.« In JavaScriptsieht die einfachste Form der if-Anweisung so aus:

if ( dies wahr ist ) { führe diesen Code aus }

Rechts

Max.Linie

Max.Linie

Dieser Code sieht wie zergliederter englisch-deutscher Text aus, und das nicht ohneGrund: Immerhin ist auch JavaScript eine Sprache. Jede if-Anweisung besteht ausdem Wort if, dem eine in runde Klammern gesetzte Anweisung sowie ein ingeschweifte Klammern gesetzter Codeblock folgen. Die runden Klammern enthal-ten die Bedingung, die geprüft werden soll, und die geschweiften Klammern enthal-ten den Code, der ausgeführt wird, falls die Bedingung erfüllt ist. Betrachten Sie z.B.den folgenden Code:

Einige KommentareKommentare ermöglichen es Ihnen, Beschreibungen des Codes direkt indiesen einzufügen. Kommentare sind in zweierlei Hinsicht nützlich: Sieerinnern Sie selbst daran, was Ihr Code macht, und sie helfen anderenSkriptautoren, die Ihren Code lesen. In großen Skripten oder Skripten, dievon vielen Personen verwendet und bearbeitet werden, sind Kommentare

unverzichtbar. Außerdem sind sie nützlich, wenn man einige Codezeilen vorüberge-hend deaktivieren möchte, während man ein Skript prüft. In diesem Buch werdenwir 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 hin-ter // folgt, wird ignoriert. Einzeilige Kommentare können auch in derselben Zeilestehen wie echter Code:

var jetzt = new Date() // Erzeuge ein Date-Objekt.

Da Blockkommentare mehrere Zeilen umfassen können, bestehen sie aus einem öff-nenden (/*) 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 zuverstecken, sowohl HTML- als auch JavaScript-Kommentare verwendet. Der Kom-mentar, der das Verstecken einleitet, ist ein einfacher HTML-Kommentar. Derschließende Kommentar verbindet hingegen einen JavaScript-Kommentar miteinem 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 gene-riert wird.



Links

Max.Linie

Max.Linie

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 eineNachricht mit der Uhrzeit aus.

Eine if-Anweisung kann auch einen else-Abschnitt mit Code enthalten, der ausge-fü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 und0:00 Uhr das Nachtbild. Der folgende Code zeigt eine vereinfachte Version desCodes 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 klei-ner gleich 16 ist, dann führe den Code in den geschweiften Klammern aus.« DasGrößer-gleich-Zeichen (>=) und das Kleiner-gleich-Zeichen (<=) kennen Sie wahr-scheinlich 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, triffthier die else-Anweisung zu. Mit else sagen wir: »Falls die Bedingung nicht wahrist, dann mache stattdessen Folgendes.« Falls es 19:00 Uhr ist, ist es nicht zwischen0: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.

DokumenteigenschaftenNachdem Sie nun die Logik von if und else verstanden haben, wollen wir uns dentatsächlichen Code für diese Seiten ansehen. Beachten Sie, dass beide nicht nurunterschiedliche Bilder und Texte aufweisen, sondern auch verschiedene Hinter-grund- und Textfarben.



Rechts

Max.Linie

Max.Linie

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 überden Kaffeegenuss aus. Liegt die Stunde nicht zwischen 0 und 16, weist die else-Anweisung das Skript an, die Hintergrundfarbe auf Schwarz und die Textfarbe aufWeiß zu setzen, das Bild foto-nacht.jpg anzuzeigen und den Text über ein gutesAbendessen auszugeben.

Um die Farben zu ändern, müssen wir zwei Eigenschaften der aktuellen Webseitesetzen. JavaScript bezeichnet diese Seite als das document-Objekt. Die Eigenschaftendes document-Objekts beschreiben verschiedene Merkmale des Objekts. Wenn wirder Eigenschaft document.bgColor einen hexadezimalen Wert zuweisen, wird dieHintergrundfarbe 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 Ladendes Dokuments gesetzt werden. Sobald das Dokument angezeigt wird, sollten Siediese Eigenschaft daher am besten unverändert lassen. Wie Sie die Farbe und dasErscheinungsbild von Text ad hoc ändern, erfahren Sie in Kapitel 7.

Der JavaScript-BaumDas document-Objekt und seine Eigenschaft bgColor sind durch einenPunkt voneinander getrennt. document.bgColor verweist also auf die Eigen-schaft für die Hintergrundfarbe des Dokuments. Das scheint zwar sehr ein-fach zu sein, aber worauf verweist dann dies:

document.mailformular.adresse.value

Es verweist auf den value des Elements adresse eines Formulars namensmailformular, das sich im document befindet. Alles klar? Einfacher wird es, wenn Siesich diese Struktur als einen Baum vorstellen.

Im Allgemeinen ordnet JavaScript alle Teile desBrowserfensters und alle Elemente einer Seite (z.B.Formulare und Bilder) wie einen Baum an. Zuerstkommt ein Hauptobjekt (der Stamm), dann dieObjekte, die vom Hauptobjekt abzweigen (dieÄste), und schließlich die Methoden und Eigen-schaften an diesen Objekten (die Blätter). Wie Sie inspäteren Kapiteln sehen werden, lautet der Termi-nus technicus für diese Struktur Document ObjectModel (DOM), aber im Moment soll der Vergleichmit einem Baum das Verständnis erleichtern.

Fortsetzung

reillys ajax javascript - download.e-bookshelf.de filewebdesign mit javascript & ajax nick...

Documents