This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
An imprint of Pearson Education München • Boston • San Francisco • Harlow, England Don Mills, Ontario • Sydney • Mexico City Madrid • Amsterdam
Bibliografische Information Der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über abrufbar.
Die Informationen in diesem Produkt werden ohne Rücksicht auf einen eventuellen Patentschutz veröffentlicht. Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt. Bei der Zusammenstellung von Texten und Abbildungen wurde mit größter Sorgfalt vorgegangen. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Verlag, Herausgeber und Autoren können für fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung übernehmen. Für Verbesserungsvorschläge und Hinweise auf Fehler sind Verlag und Herausgeber dankbar. Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Die gewerbliche Nutzung der in diesem Produkt gezeigten Modelle und Arbeiten ist nicht zulässig. Fast alle Hardware- und Softwarebezeichnungen, die in diesem Buch erwähnt werden, sind gleichzeitig auch eingetragene Warenzeichen oder sollten als solche betrachtet werden. Umwelthinweis: Dieses Buch wurde auf chlorfrei gebleichtem Papier gedruckt. Die Einschrumpffolie – zum Schutz vor Verschmutzung – ist aus umweltverträglichem und recyclingfähigem PE-Material.
Aufbau des Buches Die Beispiele Was ist JavaScript? Der Aufbau von Skriptsprachen und die Rolle des Interpreters Die Versionszyklen von JavaScript HTML- bzw. XHTML-Grundlagen JavaScript-Grundlagen
Teil II Rezepte
77
Grundlagen
79
1 2 3
79 84
4 5 6 7 8 9 10 11 12 13 14
Wie kann ich JavaScript in Webseiten einbinden? Wie kann ich eine JavaScript-Version bei der Einbindung angeben? Wie kann ich sicherstellen, dass ein Browser nur bekannte JavaScript-Anweisungen ausführt? Wie kann ich testen, ob bei einem Browser JavaScript aktiviert ist? Wie kann ich testen, welche JavaScript-Version von einem Browser unterstützt wird? Wie kann ich den Browser eines Anwenders abfragen? Wie kann ich die Version eines bekannten Browsers bei einem Anwender abfragen? Wie kann ich die Spracheinstellung eines Browsers bei einem Anwender abfragen? Wie kann ich die Bildschirmauflösung eines Besuchers ermitteln? Wie kann ich die eingestellte Anzahl an Farben bei einem Besucher ermitteln? Wie kann ich testen, ob bei einem Browser Java unterstützt wird? Wie kann ich bestimmen, welche Plug-Ins ein Browser unterstützt? Wie kann ich bestimmen, welche MIME-Typen ein Browser unterstützt? Wie kann ich eine Browserweiche erstellen?
Wie kann ich einen Test auf Unendlichkeit durchführen? Wie kann ich testen, ob ein Ausdruck numerisch ist? Festlegung des Variablen- oder eines Literaltyps bzw. des Funktionsrückgabetyps Wie kann ich den Typ einer Variablen, eines Literals beziehungsweise den Rückgabewert einer Funktion bestimmen? Wie kann ich den Typ einer Variablen bzw. den Rückgabewert einer Funktion gegen automatische Typkonvertierung schützen? Wie kann ich eine Festlegung auf string realisieren? Wie kann ich eine Festlegung auf number realisieren? Wie kann ich eine Festlegung auf boolean realisieren? Wie kann ich einen Wertebereich für eine Variable festlegen? Wie kann ich testen, ob eine Variable definiert wurde? Wie kann ich eine Variable als lokal festlegen? Wie kann ich eine Variable als global beziehungsweise permanent festlegen? Wie übergebe ich einer Funktion Werte? Wie kann ich eine Funktion mit Defaultwerten für Parameter erstellen? Wie kann ich bei einer Funktion einen Wert zurückgeben? Wie erzeuge ich einen rekursiven Aufruf einer Funktion? Wie erzeuge ich eine Objektinstanz? Wie erzeuge ich in JavaScript ein eigenes Objekt? Wie erweitere ich ein bestehendes Objekt beziehungsweise eine Klasse? Wie kann ich den Inhalt von einem Objekt als Wert ausgeben? Wie kann ich Zeichenketten kodieren und dekodieren? Wie kann ich Sonderzeichen in Strings verwenden?
Wie kann ich ein Webformular mit HTML aufbauen? Wie generiere ich einen Formularcontainer? Wie kann ich ein einzeiliges Eingabefeld realisieren? Wie kann ich ein einzeiliges Passwortfeld realisieren? Wie kann ich eine einfache Formularschaltfläche realisieren? Wie kann ich nur mit HTML eine Formularschaltfläche zum Abschicken von Formulardaten realisieren? Wie kann ich rein mit HTML eine Grafik zum Abschicken von Formulardaten realisieren? Wie kann ich nur mit HTML eine Formularschaltfläche zum Zurücksetzen von Formulardaten realisieren? Wie kann ich rein mit HTML eine Grafik zum Zurücksetzen von Formulardaten realisieren? Wie kann ich ein Kontrollfeld realisieren? Wie kann ich eine Gruppe mit Optionsfeldern realisieren? Wie kann ich rein mit HTML ein einzeiliges Eingabefeld realisieren, in dem nur die Eingabe eines Kalenderdatums erlaubt ist?
Wie kann ich rein mit HTML ein einzeiliges Eingabefeld realisieren, in dem nur die Eingabe von Dezimalkommazahlen gestattet ist? Wie kann ich rein mit HTML ein einzeiliges Eingabefeld realisieren, in dem nur die Eingabe von ganzen Zahlen gestattet ist? Wie kann ich rein mit HTML ein einzeiliges Eingabefeld realisieren, in dem nur die Eingabe eines URL gestattet ist? Wie kann ich rein mit HTML ein einzeiliges Eingabefeld realisieren, in dem nur Werte kleiner als ein vorgegebener Grenzwert gestattet sind? Wie kann ich rein mit HTML ein einzeiliges Eingabefeld realisieren, in das nur Werte größer als ein vorgegebener Grenzwert gestattet werden? Wie kann ich ein Dateiauswahlfenster realisieren, das die ausgewählte Datei in das damit verbundene Eingabefeld übernimmt? Wie kann ich ein verstecktes Formularfeld realisieren? Wie kann ich ein mehrzeiliges Eingabefeld generieren? Wie kann ich eine Auswahlliste mit einzeiligem Listenfeld erstellen? Wie kann ich eine Auswahlliste mit mehrzeiligem Listenfeld erstellen? Wie kann ich eine Auswahlliste mit Mehrfachauswahl erstellen? Wie kann ich einen Eintrag in einer Auswahlliste vorselektieren? Wie kann ich ohne ein Webformular mit einem Besucher per JavaScript interagieren? Wie greife ich mit JavaScript grundsätzlich auf ein Webformular zu? Wie bestimme ich die Anzahl der Elemente in einem Formular? Wie greife ich auf den Namen eines Formulars zu? Wie greife ich auf die Versandmethode eines Formulars zu? Wie greife ich auf die Zieladresse eines Formulars zu? Wie greife ich auf das Ziel der Antwort auf ein Formular zu? Wie greife ich auf die Kodierung eines Formulars zu? Wie kann ich die Formulardaten ohne einen Submit-Button wegschicken? Wie kann ich die Formulardaten ohne einen Reset-Button zurücksetzen? Wie greife ich grundsätzlich auf die Formularelemente zu? Wie greife ich auf den Wert eines Formularelements zu? Wie greife ich auf den Namen eines Formularelements zu? Wie erfolgt ein verkürzter Zugriff auf ein Formularelement über this? Wie greife ich aus einem Formularelement auf das umgehende Formular zu? Wie bestimme ich den Typ eines Formularelements? Wie kann ich auf den Selektionszustand von einem Optionsfeld oder einem Kontrollkästchen zugreifen? Wie greife ich auf die Elemente einer Auswahlliste in einem Listenfeld zu? Wie greife ich auf den Wert eines Eintrags in einer Auswahlliste zu? Wie greife ich auf die Beschriftung eines Eintrags in einer Auswahlliste zu? Wie ermittle ich die Anzahl der Auswahlmöglichkeiten in einer Auswahlliste? Wie kann ich testen oder festlegen, welcher Eintrag in einer Auswahlliste selektiert ist? Wie kann ich mit JavaScript den Fokus von einem Formularelement nehmen? Wie kann ich mit JavaScript einem Formularelement den Fokus geben?
Wie kann ich ein Formularelement selektieren bzw. deselektieren? Wie kann ich mit JavaScript einen Klick eines Anwenders auf ein Formularelement simulieren? Wie kann ich JavaScript-Funktionen aus Formularen heraus aufrufen? Wie setze ich onMouseOver bei Formularelementen ein? Wie setze ich onFocus bei Formularelementen ein? Wie setze ich onBlur bei Formularelementen ein? Wie setze ich onChange bei Formularelementen ein? Wie kann ich auf das Zurücksetzen eines Formulars reagieren? Wie kann ich mit JavaScript bei freier Texteingabe eine maximale Anzahl der einzugebenden Zeichen festlegen? Wie ist die Kontrolle der Benutzereingabe beim unmittelbaren Eingeben eines Zeichens möglich? Wie erfolgt die Kontrolle der Benutzereingabe beim Verlassen des Feldes beziehungsweise bei der Entgegennahme eines Rückgabewerts? Wie erfolgt die Kontrolle der Benutzereingabe beim Verlassen beziehungsweise Absenden des kompletten Formulars? Wie kann ich bei freier Texteingabe eine minimale Anzahl einzugebender Zeichen festlegen? Wie erfolgt die Kontrolle der Benutzereingabe beim Verlassen des Feldes beziehungsweise der Entgegennahme eines Rückgabewerts? Wie erfolgt die Kontrolle der Benutzereingabe beim Verlassen beziehungsweise Absenden des kompletten Formulars? Wie kann ich bei freier Texteingabe eine maximale Anzahl an angezeigten Zeichen festlegen? Wie kann ich mit JavaScript bei freier Texteingabe einen Vorgabewert festlegen? Wie kann ich bei freier Texteingabe gewährleisten, dass nur Dezimalkommazahlen gestattet sind? Wie kann ich bei freier Texteingabe gewährleisten, dass nur Ganzzahlen gestattet sind? Wie kann ich bei freier Texteingabe sicherstellen, dass dort nur Werte kleiner als ein vorgegebener Grenzwert gestattet sind? Wie kann ich sicherstellen, dass dort nur Werte größer als ein vorgegebener Grenzwert gestattet sind? Wie kann ich mit JavaScript ein Pflichtfeld erzwingen? Wie kann ich mit JavaScript bei freier Texteingabe einen bestimmten Inhalt erzwingen? Wie kann ich eine gültige E-Mail-Adresse überprüfen? Wie kann ich ein freies Eingabefeld realisieren, in dem nur die Eingabe eines URLs gestattet ist? Wie kann ich ein Eingabefeld realisieren, in dem nur die Eingabe eines Kalenderdatums erlaubt ist? Wie kann ich die Eingabe bestimmter Zeichen in einem freien Formularfeld verhindern? Wie kann ich ein Webformular grundsätzlich plausibilisieren?
113 Welche Problemstellungen müssen beachtet werden? 401 114 Wie kann ich sicherstellen, dass ein Formular nur plausibilisiert abgeschickt wird? 439 Ausnahmebehandlung
443
115 116 117 118
443 451 451 459
Was ist eine Ausnahmen, und wie kann ich sie behandeln? Wie kann ich mehrere Ausnahmen behandeln? Wie kann ich selbst definierte Ausnahmen erzeugen und verwenden? Wie kann ich freie Benutzereingaben mit dem Ausnahmekonzept absichern?
Wie kann ich ein Datenfeld anlegen? Wie greife ich auf ein Datenfeld zu? Wie erfolgt ein anonymer Zugriff auf ein Datenfeld? Wie greife ich auf die Elemente in einem Datenfeld zu? Wie erfolgt der Zugriff über einen numerischen Index? Wie erfolgt der Zugriff über einen String-Index? Assoziative Datenfelder Wie erfolgt der Zugriff auf alle Elemente eines Datenfelds über for...in? Wie kann ich die Datenfeldgröße bzw. die Anzahl der enthaltenen Elemente abfragen? Wie kann ich die Größe eines Datenfelds festlegen? Wie lege ich ein mehrdimensionales Datenfeld an und greife darauf zu? Wie kann ich ein Datenfeld sortieren? Wie kann ich die Sortierung eines Datenfelds umdrehen? Wie kann ich die Inhalte eines Datenfelds zu einem String verbinden? Wie kann ich ein Datenfeldelement aus dem Datenfeld entfernen? Wie kann ich an das Ende eines Datenfelds ein oder mehrere Elemente anfügen? Wie kann ich einen Teil eines Datenfelds extrahieren? Wie kann ich zwei Datenfelder zusammenfügen? Wie kann ich am Anfang eines Datenfelds Elemente einfügen? Wie kann ich an einer beliebigen Stelle eines Datenfelds Elemente einfügen? Wie ermittle ich den kleinsten oder den größten Wert in einem Datenfeld? Wie kann ich den Inhalt eines Datenfelds zufällig mischen? Wie kann ich eine Lottoziehung realisieren?
Wie finde ich die Länge eines Strings heraus? Wie kann ich die Buchstaben in einem String in Großbuchstaben konvertieren? Wie kann ich die Buchstaben in einem String in Kleinbuchstaben konvertieren? Wie ermittele ich das Zeichen, das in einem String an einer bestimmten Stelle steht? Wie ermittele ich die Unicode-Kodierung von einem bestimmten Zeichen, das in einem String steht? Wie verbinde ich zwei oder mehr Strings zu einem neuen String? Wie kann ich aus einer Unicode-Sequenz ein Zeichen erstellen? Wie kann ich in Strings HTML-Formatierungen vornehmen?
543 544 546 547 550
10
Inhaltsverzeichnis
149 Wie kann ich das erste Vorkommen eines Zeichens oder einer Zeichenkette innerhalb eines Strings ermitteln? 150 Wie kann ich das letzte Vorkommen eines Zeichens oder einer Zeichenkette innerhalb eines Strings ermitteln? 151 Wie kann ich innerhalb eines Strings einen Text ersetzen? 152 Wie kann ich mit regulären Ausdrücken in Strings suchen und sie ersetzen? 153 Wie kann ich einen Teil eines Strings extrahieren (slice)? 154 Wie erfolgt die Extrahierung mit substr()? 155 Wie erfolgt die Extrahierung mit substring()? 156 Wie kann ich einen String an einem Trennzeichen in ein Datenfeld aufspalten?
Wie kann ich ein Datumsobjekt mit dem aktuellen Systemdatum erzeugen? Wie kann ich ein Datumsobjekt mit einem vorgegebenen Datum erzeugen? Wie kann ich den Tag des Monats aus einem Datumsobjekt extrahieren? Wie kann ich in einem existierenden Datumsobjekt den Monatstag ändern? Wie kann ich den Wochentag des Objekts aus einem Datumsobjekt extrahieren? Wie kann ich in einem existierenden Datumsobjekt den Wochentag ändern? Wie kann ich die Stunden aus einem Datumsobjekt extrahieren? Wie kann ich in einem existierenden Datumsobjekt die Stunden ändern? Wie kann ich die Minuten der Uhrzeit aus einem Datumsobjekt extrahieren? Wie kann ich in einem existierenden Datumsobjekt die Minuten ändern? Wie kann ich die Sekunden der Uhrzeit aus einem Datumsobjekt extrahieren? Wie kann ich in einem existierenden Datumsobjekt die Sekunden ändern? Wie kann ich die Jahreszahl aus einem Datumsobjekt extrahieren? Wie kann ich in einem existierenden Datumsobjekt die Jahreszahl ändern? Wie kann ich den Monat aus einem Datumsobjekt extrahieren? Wie kann ich in einem existierenden Datumsobjekt den Monat ändern? Wie kann ich die Zeit, die seit dem 1.1.1970, 0:00:00 vergangen ist, extrahieren? Wie kann ich in einem existierenden Datumsobjekt die Millisekunden ändern? Wie kann ich den Unterschied zwischen der lokalen Zeit und Greenwich Meridian Time ermitteln? Wie kann ich eine Zeit in den IETF-Standard umwandeln? Wie kann ich eine Zeit in eine Zeichenkette mit lokaler Darstellung umwandeln? Wie kann ich ein Schaltjahr bestimmen? Wie kann ich mit Datumsangaben rechnen? Wie kann ich die Differenz zwischen zwei Datumsangaben bestimmen? Wie kann ich das Alter einer Person bestimmen? Wie kann ich ein Ablaufdatum für den Inhalt einer Webseite festlegen? Wie kann ich die Zeitspanne bis zu einem bestimmten Termin berechnen? Wie kann ich mit Datumsobjekten Summenberechnungen durchführen? Wie kann ich einem Anwender suggerieren, dass eine Webseite topaktuell ist?
Wie kann ich den Inhalt einer Webseite dynamisch schreiben? Wie kann ich in ein Dokument schreiben? Wie kann ich ein Dokument explizit öffnen oder schließen? Wie habe ich Zugriff auf Layoutinformationen in einer Webseite über document? Wie kann ich auf alle Anker in einer Webseite zugreifen? Wie kann ich auf Java-Applets in einer Webseite zugreifen? Was ist LiveConnect, und wie kann ich es nutzen? Der direkte Java-Zugriff Wie kann ich die Höhe und die Breite einer Webseite abfragen? Wie kann ich den Termin der letzten Änderung einer Webseite abfragen? Wie kann ich auf alle Hyperlinks in einer Webseite zugreifen? Wie kann ich auf den vollständigen URL einer HTML-Datei zugreifen? Wie kann ich auf alle Plug-Ins in einer Webseite zugreifen? Wie kann ich den Namen eines Fensters bestimmen? Wie kann ich auf den Titel einer HTML-Datei zugreifen? Wie kann ich ermitteln, welchen Text ein Anwender im Dokument selektiert hat? Wie kann ich ein einfaches Mitteilungsfenster anzeigen? Wie kann ich ein Fenster zum Bestätigen einer Aktion anzeigen? Wie kann ich mit einem Dialogfenster eine freie Benutzereingabe entgegennehmen? Wie kann ich die Startseite des Browsers aufrufen? Wie kann ich auf die Statuszeile des Browsers zugreifen? Wie kann ich Standardanzeigen in der Statuszeile des Browsers ermitteln oder festlegen? Wie kann ich eine Laufschrift in der Statuszeile des Webbrowsers anzeigen? Wie kann ich den Inhalt einer Webseite ausdrucken? Wie kann ich den Ladevorgang einer Webseite abbrechen? Wie kann ich eine Aktion zeitverzögert aufrufen? Wie kann ich einen Aufruf von setTimeout() anhalten? Wie kann ich auf die Adresszeile des Webbrowsers zugreifen? Wie kann ich mit JavaScript auf eine Seite weiterleiten? Wie kann ich eine aktuelle Webseite neu laden? Wie kann ich ein Browserfenster öffnen? Wie kann ich beim Öffnen eines Fensters dessen Verhalten und Aussehen beeinflussen? Wie kann ich ein Browserfenster dynamisch positionieren? Wie kann ich ein Browserfenster dynamisch in der Größe verändern? Wie kann ich den Inhalt eines Browserfensters dynamisch scrollen? Wie kann ich ein Browserfenster schließen? Wie kann ich überprüfen, ob ein zuvor geöffnetes Browserfenster noch offen ist? Wie kann ich auf die History des Webbrowsers zugreifen? Wie kann ich die Anzahl der Einträge in der History eines Besuchers ermitteln? Wie kann ich die zuletzt besuchte Seite eines Anwenders aufrufen? Wie kann ich mit Cookies arbeiten?
226 Wie kann ich überprüfen, ob ein Anwender die Verwendung von Cookies aktiviert hat? 227 Wie kann ich den Wert einer Variablen zu einer anderen Webseite weitergeben? 228 Wie kann ich sicherstellen, dass eine Webseite nur mit Zugangsbeschränkung aufgerufen werden kann? 229 Wie kann ich mit Frames umgehen? 230 Wie erfolgen Verweise zu anderen Frames mit HTML? 231 Wie kann ich JavaScript auf Frames anwenden? 232 Wie kann ich gleichzeitig mehrere Frames aktualisieren? 233 Wie kann ich verhindern, dass meine Webseite in einem Frameset angezeigt wird?
Was versteht man unter Dynamic-HTML? Wie kann ich das all-Objekt verwenden? Wie kann ich das style-Objekt einsetzen? Wie kann ich das style-Objekt so einsetzen, dass es in allen neueren Browsern funktioniert? Wie kann ich das style-Objekt in dem alten Netscape-Modell verwenden? Wie kann ich dynamisch Bilder erzeugen und darauf zugreifen? Wie kann ich die Höhe und die Breite eines Bildes dynamisch verändern? Wie kann ich durch Setzen der src-Eigenschaft einen Rollover-Effekt erzielen? Wie kann ich mit JavaScript und der src-Eigenschaft eine Animation realisieren? Wie kann ich mit JavaScript durch Veränderung der Größe einer Grafik eine Animation realisieren? Wie kann ich mit JavaScript dynamisch auf Style Sheets zugreifen? Wie kann ich Style Sheets in eine Webseite einbinden? Wie sieht eine CSS-Deklarationen grundsätzlich aus? Wie kann ich JavaScript auf Style Sheets anwenden? Wie kann ich den Hover-Effekt als Rollover-Effekt einsetzen? Wie kann ich Elemente einer Webseite frei positionieren? Wie kann ich mit JavaScript und Style Sheets dynamisch positionieren? Wie kann ich anspruchsvollere Animationen mit JavaScript und Style Sheets durchführen? Wie kann ich eine Animation per Bildverschiebung realisieren? Wie kann ich eine mit JavaScript generierte Animation erstellen? Wie kann ich ein Element in Abhängigkeit von der Mausposition positionieren?
255 Wie funktioniert Ereignisbehandlung grundsätzlich in JavaScript? 256 Wie kann ich beim Laden bzw. Verlassen der HTML-Datei eine Anweisung aufrufen? 257 Wie kann ich beim Laden einer Grafik eine Anweisung aufrufen? 258 Wie kann ich auf die Unterbrechung eines Bildladevorgangs reagieren? 259 Wie kann ich auf einen Klick auf eine Referenz reagieren?
807 808 810 810 811
Inhaltsverzeichnis
260 261 262 263 264 265 266 267 268 269 270 271
Wie kann ich auf das Überstreichen einer Referenz mit dem Mauszeiger reagieren? Wie kann ich auf Mausbewegungen reagieren? Wie kann ich auf Tastaturereignisse reagieren? Wie kann ich auf die Aktivierung und das Verlassen eines Elements reagieren? Wie kann ich grundsätzlich auf Änderungen reagieren? Wie erfolgt die Reaktion auf Zurücksetzen oder Absenden eines Formulars? Wie erfolgt die Reaktion auf die Selektion von Text? Wie kann ich einen Eventhandler explizit per JavaScript aufrufen? Wie kann ich globale Ereignisbehandlung in JavaScript realisieren? Wie kann man das event-Objekt auswerten und darauf reagieren? Wie kann ich über das Netscape-Ereignismodell global auf Ereignisse reagieren? Wie kann ich über das Microsoft-Ereignismodell global auf Ereignisse reagieren?
Vorwort Herzlich willkommen zur JavaScript-Programmierung. Mit JavaScript können Sie Leben und Aktivität in Ihre Webseiten bringen. JavaScript stellt die ideale Ergänzung zu HTML dar, um Webseiten zu dynamisieren, den Browser des Besuchers zu steuern und Aktivität vom Webserver auf den Rechner des Clients zu verlagern. Aber auch Serverprogramme lassen sich mit JavaScript steuern. Beachten Sie einmal populäre Webseiten im Internet und was da für Effekte auftreten: 왘 In der Statuszeile eines Browsers wird eine Laufschrift angezeigt. 왘 Sie füllen ein Webformular aus und vergessen ein Pflichtfeld korrekt auszufüllen. Das
Formular wird nicht abgeschickt, und Sie erhalten eine Fehlermeldung. 왘 Sie bekommen beim Aufruf einer Webseite automatisch eine Webseite angezeigt, die für
den von Ihnen verwendeten Browser optimiert ist. 왘 Sie werden automatisch von einer eingegebenen Webadresse auf eine andere Webadresse
weitergeleitet. 왘 Sie besuchen eine Webseite und finden dort ein Navigationsmenü mit zusammenge-
klappten Menüstrukturen, wie Sie es von Ihrem Dateimanager gewohnt sind. Wenn Sie auf ein Symbol (etwa ein Pluszeichen) klicken, klappt das Menü auf, und Sie sehen eine Reihe weiterer Links, die Sie anklicken können. Das Symbol vor dem übergeordneten Link hat sich verändert (meist ein Minuszeichen). Wenn Sie dieses erneut anklicken, kollabiert das aufgeklappte Menü wieder. 왘 Sie werden auf einer bereits vorher schon einmal besuchten Webseite persönlich begrüßt.
Wahrscheinlich wurde bei Ihnen bei Ihrem letzten Besuch ein so genanntes Cookie abgelegt, um Sie bei einem neuen Besuch identifizieren zu können. 왘 Auf der Webseite läuft eine Animation. 왘 Eine Webseite zeigt Ihnen das aktuelle Tagesdatum oder gar die Uhrzeit an. Oder weitere
dynamische Informationen wie Ihren Browsertyp, Ihre Landeseinstellung oder Ihr Betriebssystem. 왘 Sie besuchen eine Webseite, und automatisch werden diverse weitere Browserfenster
(meist mit – nerviger – Werbung) zusätzlich angezeigt. 왘 In einer Framestruktur werden auf einen Mausklick gleichzeitig mehrere Frames aktuali-
siert. All diese Vorgänge lassen sich mit JavaScript realisieren (wobei insbesondere bei Animationen natürlich auch andere Techniken zum Einsatz kommen). Viele Situationen, die Ihnen im täglichen »Webleben« begegnen, werden mit JavaScript programmiert. JavaScript ist sicher nicht die Lösung für jedes Problem im Web, aber es bietet so viele interessante Möglichkei-
16
Vorwort
ten, dass eine Beschäftigung damit äußert nützlich und vor allem spannend und interessant ist. Und das alles, ohne ein einziges Programm kaufen zu müssen. Dabei ist JavaScript dennoch einfach zu lernen und vor allem unabhängig von einer speziellen Plattform. Ob Sie Linux, Windows, Mac OS oder ein anderes Betriebssystem verwenden. JavaScript wird auf nahezu allen Plattformen mit grafischer Oberfläche zu finden sein. Und JavaScript wird heutzutage von (fast) jedem Browser unterstützt, sofern es sich nicht um uralte Varianten handelt. Mit einer Webseite, die JavaScript verwendet, werden Sie nicht unnötig auf einen spezifischen Browsertyp oder ein optionales Plug-In eingeschränkt (wie es etwa bei zahlreichen Konkurrenztechniken der Fall ist). Mit JavaScript kann man – ohne Zusatzkosten – viele interessante Dinge tun, die sonst nur mit teueren Programmen zu bewerkstelligen sind. JavaScript ist immer da, wo man im Rahmen einer Webseite innerhalb des Browsers über die Möglichkeiten von HTML (Hyper Text Markup Language) hinausgehende Fähigkeiten benötigt, ein sehr heißer Tipp, wobei oft noch weitere Techniken wie Style Sheets hinzugenommen werden.
1
Über den Autor
In diesem Vorwort möchte ich mich Ihnen ebenfalls kurz mit ein paar wichtigen Eckdaten vorstellen. Ich bin Diplommathematiker und habe nach dem Studium einige Jahre bei einer großen Versicherung als Programmierer gearbeitet. Zu der Zeit waren noch DOS-Programme üblich, und Windows 3.x galt als letzter Schrei ;-). Entsprechend habe ich meine professionelle Programmiertätigkeit mit Turbo Pascal und C/C++ begonnen und damit Versicherungsprogramme für PCs erstellt. Seit 1995 schlage ich mich als Freelancer durch das Leben. Das umfasst die Tätigkeiten als Fachautor, Fachjournalist, EDV-Dozent und Programmierer, was einen guten Mix ausmacht und mich vor allem vor Langeweile und Monotonie bewahrt. Privat bin ich auf eine tägliche Kaffeedosis angewiesen (sonst bin ich ungenießbar), treibe viel Sport, treibe mein Motorrad oder Mountainbike durch die TaunusBerge, spiele Saxophon in einer Rockband und verteidige täglich mein Büro gegen das Eindringen meiner Zwillinge. Außerdem stehe ich auf »Per Anhalter durch die Galaxis« und den Film »Blues Brothers«.
2
Wozu ein Codebook?
Was ist ein Codebook, und was ist besonders daran? Und wozu braucht man ein Codebook für JavaScript? Einerseits können mittlerweile sehr viele Leute mit JavaScript programmieren. Diese Skriptsprache ist unbestritten die am meisten eingesetzte Sprache zur Programmierung von clientseitigen Webaktionen. Andererseits ist JavaScript eine Sprache, die sich viele Webdesigner, HTML-Autoren oder Programmierer quasi nebenher aneignen. Sie wird dann auch oft als Ergänzung zu den eigentlichen Haustechniken eingesetzt. Etwa wenn ein Webdesigner mit einem Tool wie Dreamweaver eine Webseite generiert hat und bestimmte Funktionalität in einer Webseite als Ergänzung benötigt, die JavaScript realisieren lässt. Oder ein HTML-Autor erstellt mit einem reinen Editor eine Webseite und möchte Funktionalitäten ergänzen, die HTML einfach nicht bietet. JavaScript bietet in vielen Fällen die ideale Ergänzung, und deshalb lernen so viele Leute, die sich mit der Internet-Programmierung im weiteren Sinn beschäftigen, diese Sprache. Der Einstieg in JavaScript ist auch alles andere als
Wozu ein Codebook?
17
schwer, und erste Beispiele und Projekte werden schnell zu Erfolgen führen. Aber aufgrund des oft nur seltenen Einsatzes von JavaScript kommen nur wenige JavaScript-Programmierer zu komplexeren Aufgaben, und vor allem fehlt die Praxis, um für spezifische Situationen eine funktionierende Lösung schnell greifbar zu haben. Ebenso gibt es zahlreiche Feinheiten im Umgang mit JavaScript, die zum einen auf den unendlichen Spezifika der unterschiedlichen Browser und zum anderen vielen Automatismen der Sprache selbst beruhen. Deshalb macht eine Rezeptsammlung wie in diesem Codebook für die gängigsten Fragestellungen gerade für JavaScript sehr viel Sinn. Das Buch hier ist deshalb kein Lehrbuch, um den Einstieg in JavaScript zu schaffen, sondern wendet sich an JavaScript-Programmierer mit erster Erfahrung, um diesen möglichst universell einsetzbare Hilfestellung bei konkreten Problemen aus der Praxis zu geben. Dazu umfasst das Buch ein breites Spektrum mit Themen, die typischerweise mit JavaScript gelöst werden, und versucht, durch wieder verwendbare, plattform- und browserneutrale Module Schablonen zu liefern, die Sie leicht an spezifische Aufgaben anpassen können. Jetzt aber genug der Vorrede. Los geht es mit JavaScript. Mir persönlich (und Ihnen hoffentlich auch) macht die Arbeit mit JavaScript neben der extremen Nützlichkeit im Rahmen einer Webseite noch Spaß, was ein sicher weiterer wichtiger Grund ist, diese Technologie zu lernen. Ralph Steyer www.rjs.de
TEIL I Einführung
Einführung 1
Aufbau des Buches
Das Buch ist als Nachschlagewerk konzipiert, in dem Sie Lösungen für spezifische Aufgabenstellungen finden und kein Lehrbuch im klassischen Sinn mit einem didaktischen Aufbau. Die Rezepte, wie sie in Teil 2 angeboten werden, folgen allgemein dem Motto »Wie kann ich ...?«. Das Buch ist in keiner Weise hierarchisch strukturiert. Mit anderen Worten – weder bauen die einzelnen Kategorien und Rezepte aufeinander auf; noch sind sie durchgängig von leicht nach schwer sortiert. Jedes Rezept ist unabhängig einsetzbar und setzt beim Leser nur voraus, dass einige JavaScript-Grundlagen vorhanden sind. Diese werden jedoch im Rahmen dieses Einführungsabschnittes komprimiert vorgestellt. Für die Klassifizierung der Rezepte wage ich gelegentlich eine Einschätzung, ob deren Verwendung in einem Webprojekt unabdingbar, sehr wichtig, wichtig oder nur nice to have ist. Dabei kann diese Einschätzung selbstverständlich nicht universell gültig sein; und was für das eine Projekt unabdingbar ist, kann für ein anderes Webprojekt überflüssig sein. Dennoch soll die Wertung eine Anleitung darstellen, ob ein bestimmtes Rezept für Sie sinnvoll ist oder nicht. Ich möchte zudem einige Rezepte als subversiv bezeichnen, wenn man damit Dinge tun kann, die die meisten Besucher einer Webseite als störend empfinden (sie etwa auf einer Webseite festhalten oder in einer Endlosschleife mit unablässig aufpoppenden Fenstern zu nerven). Solche Rezepte gehören trotz ihres subversiven Charakters meines Erachtens dennoch zum Spektrum dessen, was ein JavaScript-Programmierer parat haben sollte. Und obwohl JavaScript in nahezu jedem Browser unterstützt wird, kann man sich nicht immer auf die korrekte Funktion verlassen. Bei Bedarf finden Sie Hinweise, welche Browser Schwierigkeiten machen und was Sie bezüglich verschiedener Browser zu beachten haben. Dabei beschränke ich mich auf die gängigsten Browser Internet Explorer 6, Netscape Navigator 7.x (beziehungsweise die verwandten Mozilla 1.4 und Firefox), den Konqueror für die KDE 3.2 (Linux) und Opera 7.5. Ältere Browser finden bei Bedarf Beachtung. Explizit soll der auch heute noch hin und wieder verwendete Netscape Navigator 4.7 gelegentlich betrachtet werden. Als Referenzbetriebssysteme kommen Linux1 und Windows XP Pro zum Einsatz.
Schreibkonventionen In diesem Buch werden Sie verschiedene Schreibkonventionen finden, die Ihnen helfen sollen, die Übersicht zu bewahren. Wichtige Begriffe werden hervorgehoben; Teils auch so. Vor allem sollten Sie erkennen können, ob es sich um normalen Text oder Programmcode handelt. Das Folgende wäre ein Programmcode: Das ist Programmcode.
1.
Konkret hauptsächlich SuSE 9.1, aber auch gelegentlich Mandrake 10.0 und Knoppix 3.4 (also Debian).
22
Einführung
Hinweis
Das ist ein besonderer Hinweis, den Sie an der Stelle beachten sollten.
Tipp
Das ist ein Tipp, der Ratschläge oder besondere Tricks zu einer jeweiligen Situation zeigt.
Achtung
Aber auch im Fließtext werden bei Bedarf Begriffe so dargestellt, dass Sie Quellcodepassagen erkennen. Ebenso MENÜBEFEHLE, (Tasten), URLs und noch einige weitere Besonderheiten. Diese Formatierungen werden konsequent verwendet. Und ebenso werden in dem Buch Bereiche verwendet, die über die Markierung mit verschiedenen Symbolen besondere Aufmerksamkeit erzeugen sollen.
Hier droht Gefahr.
2
Die Beispiele
Sie finden die Rezepte in diesem Buch alle auf der Buch-CD. Sie sind entsprechend der Kapitel in Verzeichnisse einsortiert. Die Namen der jeweiligen Dateien finden Sie jeweils bei den Rezepten notiert.
3
Was ist JavaScript?
Als 1990/91 das WWW entstand, gab es im Grunde nur HTML (HyperText Markup Language); um Webseiten zu beschreiben. HTML besteht aus reinen Klartextanweisungen und stellt das Rückgrad des WWW dar. Und ohne sich als Prophet leichtsinnig zu versuchen – es wird auch in Zukunft so bleiben. HTML wird von einem Konsortium mit Namen W3C (http://www.w3.org) standardisiert. In diesem Gremium versuchen die wichtigsten Protagonisten des Internets, sich auf gemeinsame Strategien zu einigen. HTML ist nicht das ganze Web, aber ohne HTML gibt es überhaupt kein Web. Keine (!) der anderen Technologien (Grafiken, Videos, Sounds, Skripte usw.) ist notwendig im Web. Das Web an sich funktioniert – wenn es sein muss – auch nur mit reinem HTML. Jede der anderen Technologien benötigt HTML, um sich darin zu verankern. Das Web würde freilich viel an Faszination und Bequemlichkeit verlieren, wenn man auf ergänzende Techniken verzichten würde. Die Möglichkeiten von reinem HTML stoßen sehr schnell an Grenzen und werden mehr und mehr durch verschiedene Zusatztechnologien erweitert. Das beginnt ganz primitiv bei Grafiken (bereits von Anfang an im Web als Vervollständigung von dem reinen Text auf Basis von HTML dabei) und geht über Multimediatechniken wie Flash (ein proprietäres – d.h. herstel-
Was ist JavaScript?
23
lerabhängiges – Programm beziehungsweise Format zum Erzeugen von Animationen im Rahmen einer Webseite) hin zu Style Sheets und echten Programmiertechniken in Webseiten.
Achtung
Zu den wichtigsten Erweiterungen von HTML zählen die Skriptsprachen, von denen es zahlreiche Varianten gibt. JavaScript ist eine der gewichtigsten Ergänzungstechnologie zu HTML und eine solche Skriptsprache für das Internet. Diese Sprache ist an Java angelehnt, offen, plattformunabhängig und leicht zu erlernen. Sie wurde Mitte der 90er-Jahre von der Firma Netscape (http://www.netscape.com) in Abstimmung mit Sun Microsystem (http:// www.sun.com) entwickelt. Sun wollte zum gleichen Zeitpunkt eine aus dem Oak-Projekt hervorgegangene Technologie für das WWW umstricken und unter neuem Namen etablieren. Ursprünglicher Einsatzzweck von JavaScript war die Erweiterung des Webbrowsers Navigator 2.0 um Steuerungsmöglichkeiten für diesen Browser aus einer Webseite heraus. Diese mit dem Navigator 2.0 1995 erstmals veröffentlichte Skriptsprache wurde zuerst Mocha, dann LiveScript und letztendlich JavaScript genannt, um eine Anlehnung an Java zu verdeutlichen (denn das war der Name der aus Oak hervorgegangenen Sun-Technologie). Aber Vorsicht! Die Ähnlichkeit im Namen zeigt eine gewisse Verwandtschaft zwischen JavaScript und Java an. Jedoch ist diese Verwandtschaft weitläufiger, als es Laien erscheint. Java ist viel leistungsfähiger als jede Skriptsprache, aber auch viel komplizierter zu lernen. Die Sprache ist sowohl von der Syntax als auch dem Konzept C/C++ sehr ähnlich. Für Java gibt es ganz andere Anwendungen als für Skriptsprachen wie JavaScript. Java ist eine weitgehend betriebssystem- und hardwareunabhängige, objektorientierte Programmiersprache beziehungsweise ganze Entwicklungsplattform, die zwar einen Schwerpunkt im Bereich Internet/Intranet hat (dabei kommen so genannte JavaApplets auf Seiten des Clients oder aber Java Servlets bzw. JSP – Java Server Pages – auf Seiten des Servers zum Einsatz), den Haupteinsatzzweck aber im Bereich der datenbasierenden Consumerelektronik finden soll. Daneben gilt Java als sehr sicher und geeignet für Anwendungen, die in einer heterogenen Netzwerkumgebung ablaufen sollen. Viele Aktionen im Bereich des Online-Bankings, des elektronischen Zahlungsverkehrs oder sonstiger sensibler Datenkommunikation beruhen auf Java. Mit Java lassen sich vollständige Programme entwickeln (im Gegensatz zu Skripten, die nur bereits fertige Programme steuern und nutzen). Sowohl in Form von Java-Applets, die mit HTML-Anweisungen in eine Webseite integriert werden und auch nur dort lauffähig sind, als auch als vollständig eigenständige Applikationen, die im Gegensatz zu den Applets keinen Container wie einen Browser mehr benötigen.
Eine direkte Konkurrenz zu JavaScript ist jedoch VBScript, eine von Microsoft aus Visual Basic entwickelte und weitgehend auf das Windows-Betriebssystem mit INTEL-basierenden Prozessoren optimierte Skriptsprache. Auf Seiten der Browser unterstützt im Prinzip nur der Internet Explorer VBScript. Zwar ist die Technologie dort auch leistungsfähiger als JavaScript, aber da dies mit erheblichen Sicherheitsrisiken einhergeht, ist das eher von Nachteil. Bedeutung hat VBScript vor allem bei der serverseitigen Programmierung. Auf Seiten von Microsoft-Webservern ist VBScript die Haussprache für die ASP-Technologie (Active Server Pages). ASP kann freilich ebenso mit JavaScript realisiert werden.
24
Einführung
Seit geraumer Zeit ist auf Serverseite jedoch hauptsächlich PHP sehr populär. PHP ist sehr einfach zu lernen und hochspezialisiert auf bestimmte Vorgänge im Rahmen von Servervorgängen wie Formularauswertungen, Datenbankzugriffen oder Dateizugriffe auf dem Serverrechner. Neben JavaScript fällt oft der Name JScript. Bei JScript handelt es sich um einen Ableger von JavaScript, welcher hauptsächlich der Unterstützung von JavaScripts im Internet Explorer der Firma Microsoft (http://www.microsoft.com) dient. Dort und in weiteren Microsoft-Produkten gibt es aus Lizenzgründen keinen direkten JavaScript-Interpreter. Microsoft hat JavaScript nie lizenziert und stattdessen mit JScript einfach einen JavaScript-Clone erzeugt, der ab dem Internet Explorer 3.0 verfügbar ist. JScript stimmt in der Syntax in großen Bereichen mit JavaScript überein, und man muss auf die marginalen Unterschiede selten Rücksicht nehmen. Dennoch ist hier eine der Erklärungen zu finden, weshalb es gelegentliche Abweichungen bei der Interpretation von JavaScripts in echten JavaScript-Browsern und dem Internet Explorer gibt (wobei das im Wesentlichen alte Browser betrifft – in neuen Browsern sind die Probleme weitgehend beseitigt).
4
Der Aufbau von Skriptsprachen und die Rolle des Interpreters
Wie schon erwähnt (und sicher bekannt), bestehen Webseiten im Wesentlichen aus Klartext (HTML, JavaScript, Style Sheets etc.), der beim Anwender durch einen Webbrowser interpretiert wird. Der Browser sorgt dafür, dass aus diesen Anweisungen das wird, was wir als eine Webseite bezeichnen. Dabei zieht er bei Bedarf in der Webseite referenzierte Multimediadaten wie Grafiken, Videos, Animationen etc. hinzu. Das ist die optische Darstellung, die jeder Anwender in Form von Textformatierungen, Absatzformatierungen, Grafikdarstellungen etc. wahrnimmt. Für die Umsetzung der HTML-Anweisungen ist der HTML-Interpreter vom Browser verantwortlich. In der Vergangenheit gab es zahlreiche Probleme mit der unterschiedlichen Darstellung von Webseiten in verschiedenen Browsern, aber mittlerweile verhalten sich moderne Browser bei der Darstellung von HTML-Befehlen recht synchron. Kann ein Browser mit einer in eine Webseite integrierten Datei (etwa eine Flash-Animation) nicht direkt umgehen, greift er oft auf ein Zusatzmodul zurück. Dieses nennt man ein Plug-In. Ist für ein Dateiformat ein solches Plug-In vorhanden, kann der Browser mit dessen Hilfe auch ein Fremdformat verwenden. In Webseiten integrierte Skripte werden jedoch von einem anderen Bestandteil des Browsers direkt ausgeführt. Bei Skriptsprachen handelt es sich ebenfalls immer um Klartext-Interpretersprachen, die mit einem simplen Texteditor erstellt werden können (wie auch reine HTML-Dokumente) und zur Laufzeit von irgendeinem Interpreter interpretiert werden müssen. Das bedeutet, der vom Programmierer geschriebene Quelltext (Klartext) wird erst zur Laufzeit des Skriptes Schritt für Schritt in ausführbare Anweisungen übersetzt. Diesen Interpreter stellt das umfassende Programm bereit, in das Skripte geladen werden. Läuft ein JavaScript auf einem Webserver, stellt dieser einen passenden Interpreter bereit. Im Fall von JavaScripts beim Anwender ist es der Webbrowser, der einen internen JavaScript-Interpreter bereitstellt.
Die Versionszyklen von JavaScript
25
JavaScript als Sprache beinhaltet einen internen Befehlssatz, eine Syntax und eine definierte Struktur, mit denen diverse Objekte rund um den Browser kontrolliert werden können. JavaScript enthält sowohl einige wenige eigene Objekte, kann aber vor allem auf zahlreiche fremde Objekte seiner Umgebung zugreifen. Ein kontrollierbares Objekt ist beispielsweise der Browser selbst. Aber auch andere Objekte lassen sich mit Skripten beeinflussen. JavaScript kann beispielsweise zur Kontrolle von Bestandteilen einer Webseite, Java-Applets und anderen Objekten verwendet werden. JavaScript ist jedoch nur eine objektbasierende, aber keine objektorientierte Sprache, denn zu einer echten objektorientierten Sprache fehlen einige zentrale Merkmale (etwa die Vererbung). Eigentlich ist es so, dass clientseitige Skriptsprachen im Wesentlichen den relativ dummen Browser intelligenter machen. Und um es noch einmal zu betonen – in modernen Browsern ist die Nutzung einer oder mehrerer Skriptsprache(n) standardmäßig integriert. Und so gut wie immer wird JavaScript verstanden, obwohl ein Anwender in seinem Browser JavaScript deaktivieren kann.
5
Die Versionszyklen von JavaScript
JavaScript ist seit seiner ersten Vorstellung im Jahre 1995 durch mehrere Versionszyklen gegangen. Grundsätzlich muss jedoch beachtet werden, dass für nahezu alle neu eingeführten Sprachzyklen von JavaScript kaum ein zeitnah aktueller Browser den offiziellen Standard vollständig unterstützt hat und es immer geraume Zeit dauerte, bis die nächsten Browserversionen einen vollständig Sprachzyklus verdaut hatten! Das gilt bis heute, obwohl die Entwicklung von JavaScript derzeit nicht sonderlich schnell voranschreitet. Aber zurück zur geschichtlichen Entwicklung. Im November 1996 taten sich Netscape und die internationale Industrievereinigung ECMA (European Computer Manufacturers Association) mit Sitz in Genf/Schweiz (http://www.ecma.ch/) zusammen und beschlossen, JavaScript zu standardisieren. Aus dem Projekt entstand ein Sprachdialekt mit Namen ECMAScript, was der Name für das von ECMA standardisierte JavaScript ist (auch der JavaScript-Clone JScript orientiert sich an diesem Standard). Im Juni 1997 wurde die erste Version von ECMAScript freigegeben (der Standard ECMA-262). Alle neueren JavaScript-Versionen versuchen mit ECMAScript so weit wie möglich kompatibel zu sein. Die im Juni 1998 eingeführte JavaScript-Version 1.3 war dementsprechend bereits einigermaßen kompatibel zu der ECMA262-Norm. Im Oktober 1998 stellte Netscape JavaScript 1.4 vor. Diese Version von JavaScript beinhaltet erstmals ein Behandlungskonzept für so genannte Exceptions (Ausnahmen), die neuen Operatoren in und instanceof, Veränderungen im Rahmen von LiveConnect zur Verbindung von JavaScript mit Java und Plug-Ins sowie Veränderungen beim Objekt Function. Vor allem wurde der JavaScript-Standard 1.4 voll kompatibel mit dem ECMA-262-Standard designt. War er deshalb ein durchschlagender Erfolg? Das Gegenteil ist der Fall. Die Version 1.4 kann man nur als Zwischenversion betrachten, denn sie wurde von kaum einem Browser richtig umgesetzt. Genau genommen richten sich die nachfolgenden Browser nach der ECMAScript Editon 3 (obwohl die meisten diesen nur sukzessive umsetzen), die im Dezember 1999 freigegeben wurde. Die dritte Version des ECMAScript-Standards entspricht dem derzeit immer noch im Web maximal verfügbaren JavaScript 1.5 und beinhaltet als Erweiterung reguläre Ausdrücke, wie sie aus Perl etabliert sind, verbesserte Behandlung von Strings, neue Kontrollanweisungen, ein try/catch-Excep-
26
Einführung
tion-Handling, wie es aus Java bekannt ist2, erweiterte Fehlerdefinitionen, Formatierungen für nummerische Ausgaben und einige weitere kleinere Erweiterungen im Rahmen der Internationalisierung. Und obwohl JavaScript 1.5 mit seinem Geburtsdatum im letzten Jahrtausend sicher kein Frischling mehr ist, kann man auch heute sogar nur die Version 1.3 als allgemein im Web akzeptierten Standard betrachten. Das soll bedeuten, den Standard 1.3 verstehen nahezu alle heute noch von Anwendern verwendete Browser. Bei Techniken aus Nachfolgeversionen gibt es immer noch bestimmte Konstellationen zwischen JavaScript-Anweisungen und Browsern, wo es Probleme geben kann. Ein paar explizite Beispiele mit Browsern sollen das belegen. In der ersten Hälfte 2000 kam mit dem Navigator 6 der erste Browser heraus, der offiziell JavaScript 1.5 implementiert3. Der zeitgleich aktuelle Internet Explorer 5.5 beinhaltete eine JScript-Version, die ungefähr JavaScript 1.4 entsprach. Der Internet Explorer 5.5 unterstützt darüber hinaus bereits einige Features von JavaScript 1.5, weshalb er eigentlich JavaScript 1.5 näher ist. Dennoch kann man mit einfachen Beispielen zeigen, dass der Internet Explorer selbst in der Version 6 noch Skript-Container ignoriert, die mit der Versionsangabe 1.4 oder 1.5 gekennzeichnet sind, obwohl er die meisten erweiterten Syntaxstrukturen verstehen würde. Andere Browser wie Opera 6 oder Mozilla 1 (die ja auch nicht gerade uralt sind) verstehen ebenso Teile von JavaScript 1.5 nicht vollständig. Tests auf verschiedenen Browser sind leider – insbesondere bei Anweisungen jenseits von JavaScript 1.3 – deshalb unumgänglich. Aber glücklicherweise nehmen die schwerwiegenden Probleme in den neuen Browsern rapide ab.
6
HTML- bzw. XHTML-Grundlagen
Die Einbindung von JavaScript in eine Webseite gehört nicht zu JavaScript, sondern betrifft ausschließlich HTML. Die Verbindung von JavaScript mit einer Webseite wird ausschließlich mit HTML erledigt. Das ist wichtig, denn es muss klar sein, wann bei der Bearbeitung einer Webseite der HTML-Interpreter aktiv ist und wann der JavaScript-Interpreter. Die Tatsache hat wichtige Konsequenzen. So ist Groß- und Kleinschreibung in purem HTML irrelevant, in JavaScript spielt sie jedoch eine entscheidende Rolle. Der Abschnitt hier kann sogar noch allgemeiner verstanden werden, denn anhand von JavaScript kann die Einbindung von beliebigen Skriptelementen in Webseiten exemplarisch behandelt werden. Auch andere Skriptelemente werden sich vollkommen analog zu JavaScript in eine Webseite einbinden lassen. Es gibt verschiedene Techniken, wie Skripte mit einer Webseite verbunden werden können. Bevor diese behandelt werden, sollen die wichtigsten HTML-Grundlagen besprochen werden. 2. 3.
Im Grunde nur eine Etablierung des Ausnahmebehandlungskonzeptes auf JavaScript 1.4. Auf der einen Seite bot der Navigator 6 eine gute und stabile Unterstützung für JavaScript 1.5 respektive die ECMA-262-Norm. Auf der anderen Seite ist dieser Browser in sehr vielen wichtigen Details nicht mehr zu den Standards kompatibel, die in den Vorgängerversionen des Navigators zentrale Bestandteile waren. Zwar waren diese nicht vollständig standardisiert, aber das sind Elemente von anderen Browsern auch nicht. Die vollständige Wegnahme der Unterstützung von Features, die mit Netscape Navigator 4.x eingeführt wurden (etwa document.layers oder document.embeds), führen in, auf diesen älteren Browsern optimierten, Skripten zu erheblichen Problemen, wenn diese in der Nachfolgeversion geladen werden.
HTML- bzw. XHTML-Grundlagen
27
Eine aus HTML aufgebaute Webseite beinhaltet nur zwei grundsätzlich zu unterscheidende Strukturen: 왘 Steueranweisungen 왘 reiner Text
Steueranweisungen sind die HTML-Befehle. Alle HTML-Steueranweisungen werden in so genannten Tags angegeben, die von spitzen Klammern – dem »Kleiner«- und dem »Größer«Zeichen – begrenzt werden. Ein HTML-Tag sieht also von der Struktur her immer so aus: <xyz> Listing 1: Das Schema eines HTML-Tags
Alles, was kein Tag ist (d.h., es ist nicht von einem »Kleiner«- und einem »Größer«-Zeichen eingeschlossen), wird beim Laden einer Webseite von einem Browser als reiner Text verstanden. Das ist nicht so trivial, wie es im ersten Moment klingt. Es hat fatale Auswirkungen. Ein großes Problem beim Interpreterkonzept (das ja zur Darstellung von HTML-Dokumenten zum Tragen kommt) ist das schnelle Veralten der Interpreter. Wenn in einer Interpretersprache ein oder mehrere neue Befehle hinzugefügt werden, können die bis dahin entwickelten Interpreter diese Anweisung(en) naturgemäß noch nicht kennen und entsprechend nicht ausführen. Anwender, die ein Dokument mit solch neuen Anweisungen in einem davor veröffentlichten Interpreter laden, bekommen Schwierigkeiten. Da HTML über die Zeit immer weiter entwickelt und vor allem durch browserspezifische Zusatzanweisungen angereichert wurde, gibt es dementsprechend eine Vielzahl von Dialekten, und nahezu kein Browser kann alle Anweisungen sämtlicher Dialekte vollständig. Was soll aber geschehen, wenn ein Browser in einer HTML-Seite eine Anweisung findet, die er nicht versteht? Abstürzen, wie es normalerweise Windows-Programme tun, wenn sie an einer unglücklichen Programmanweisung Schluckauf bekommen? Oder eine Fehlermeldung bringen, mit der üblicherweise kein Anwender etwas anfangen kann? Es gibt noch eine dritte Lösung – ignorieren! Und das ist, obwohl es erst einmal nicht besonders positiv erscheinen mag, zumindest bei der Beschreibung von Dokumenten im Web die beste der drei Varianten. Das Ignorieren von unbekannten Anweisungen durch den Browser basiert auf dem Prinzip der Fehlertoleranz, welches zu den Eckdaten von HTML gehört. Dieses Prinzip veranlasst die Programme zur Auswertung von HTML-Dokumenten, sowohl fehlende Strukturen quasi unsichtbar im Hintergrund zu ergänzen, wenn diese offensichtlich fehlen und eindeutig ergänzt werden können4, als auch bei der Interpretation einer HTML-Datei so fehlertolerant wie irgend möglich zu sein. Der äußerst positive Effekt ist, dass dann auch syntaktisch unkorrekte Dokumente so weit wie möglich ausgewertet werden können. Soweit Browser korrekte HTML-Anweisungen vorfinden, werden diese Anweisungen ausgeführt und angezeigt. Falsche oder unvollständige Anweisungen werden ganz einfach ignoriert. Und alles, was sich außerhalb eines Tags befindet, wird als reiner Text im Anzeigebereich des Browsers dargestellt. 4.
Etwa ein fehlendes Grundgerüst in einer Webseite.
28
Einführung
Das Prinzip der Fehlertoleranz ist unumgängliche Voraussetzung dafür, dass immer neue HTML-Anweisungen oder neue Technologien im Internet eingeführt werden können (das betrifft natürlich auch JavaScript) und dennoch die älteren Browser beim Laden solcher Webseiten nicht »abschmieren«. Was sie nicht kennen, wird einfach ignoriert. Der Rest wird dargestellt. Eine Abwärtskompatibilität der HTML-Dokumente ist also immer sichergestellt, auch wenn im schlimmsten Fall signifikante Informationen beim Anzeigen verloren gehen können. Dummerweise kann man bei Skript- und Programmiersprachen nicht so tolerant verfahren, da viele Schritte aufeinander aufbauen. Es gibt nun in HTML Tags, die zwingend einen Beginn- und einen Ende-Befehl benötigen. Beide zusammen bilden einen so genannten Container, der den Bereich für die Wirkung einer HTML-Anweisung festlegt, etwa von wo bis wo ein Text fett dargestellt werden soll oder wo der Beginn oder das Ende einer Tabelle ist. Bei Tags nennt man das öffnende Tag das Einleitungs- und das den Container beschließende Tag das Abschluss-Tag. Abschluss-Tags sind bis auf einen der öffnenden Klammer folgenden Slash (/) identisch mit dem Einleitungs-Tag. Der Abschluss-Tag zum fiktiven Einleitungs-Tag <xyz> würde wie folgt aussehen: Beispiele: ...
...
<script> ... Listing 2: Verschiedene HTML-Container
Es gibt neben Containern in der HTML-Syntax auch Tags, die nur als Einleitungs-Tag vorkommen, beispielsweise ein Zeilenumbruch, der durch auch ohne Ende-Tag vollständig beschrieben ist. Oder auch die Einbindung von Grafiken mit dem Tag . Solche einzelnen Tags werden da verwendet, wo eine Wirkung nicht explizit beschränkt werden muss.
Achtung
Bei HTML-Steueranweisung spielt es im Gegensatz zu den Befehlsanweisungen vieler anderer Sprachen keine Rolle, ob sie groß- oder kleingeschrieben werden (bei JavaScript wird das jedoch eine Rolle spielen). Die Anweisung
bewirkt das Gleiche wie
. Auch eine unterschiedliche Groß- und Kleinschreibung im Einleitungs- und Abschluss-Tag oder sogar innerhalb einer Anweisung hat keine negativen Auswirkungen5, erhöht jedoch nicht gerade die Lesbarkeit. Diese letzte Aussage als auch der Verzicht auf einen Abschluss-Tag bei einigen Befehlen gilt nicht für XHTML, worauf gleich noch kurz eingegangen wird.
Viele Tags sind erst dann sinnvoll einzusetzen, wenn sie genauer spezifiziert werden. Nicht jeder, denn ein Zeilenumbruch ist immer durch die Anweisung vollständig beschrieben. 5.
Das wäre eine gültige, wenngleich nicht sonderlich glücklich gewählte Syntax:
HTML- bzw. XHTML-Grundlagen
29
Dann gibt es Anweisungen, die mit oder ohne Parameter funktionieren. Etwa der -Tag, bei dem Sie optional beispielsweise Hintergrundfarbe und Textfarbe der Webseite angeben können. Wenn Parameter angegeben werden, werden bestimmte Aspekte genauer spezifiziert. Fehlen sie, werden Grundeinstellungen verwendet. Aber nicht alle Anweisungen sind so eindeutig oder flexibel. So gibt es beispielsweise die Steueranweisung , mit der die Bedingungen für die Wahl der Schrift in der Webseite angegeben werden. Aber ohne genauere Angaben ist die Anweisung sinnlos. Die Schriftgröße, die Schriftart oder die Schriftfarbe sind genauere Spezifikationen, welche durch so genannte Parameter erfolgen. Diese werden bei Bedarf den einleitenden Tag – durch Leerzeichen abgetrennt – erweitern. Dabei gibt es zwei Formen von Parametern: 1. Parameter mit einer Wertzuweisung 2. Parameter, die bereits einen Wert repräsentieren Parameter mit einer Wertzuweisung bekommen über einen Zuweisungsoperator – dem Gleichheitszeichen (=) – den entsprechenden Wert zugeordnet. Dies kann ein Text oder eine Zahl sein oder aber auch andere Dinge (etwa eine Internet-Adresse). Meist werden die Werte in Hochkommata eingeschlossen, aber das ist in HTML6 so gut wie nie notwendig7. Ein Tag mit einem Parameter mit einer Wertzuweisung sieht schematisch so aus:
Beispiele: Listing 3: HTML-Tags mit Parameter
Parameter, die bereits einen Wert repräsentieren, brauchen bloß durch ein Leerzeichen abgetrennt (!) in den Einleitungs-Tag geschrieben zu werden. Sie fungieren immer als Schalter. Wenn sie angegeben werden, wird eine Eigenschaft aktiviert, fehlen sie, ist die jeweilige Eigenschaft deaktiviert. Ein Tag mit einem Parameter, der bereits einen Wert repräsentiert, sieht schematisch so aus: Listing 4: Schema für einen Parameter ohne Wertzuweisung
6. 7.
In XHTML schon. Eine Ausnahme ist eine Bildreferenz mit dem -Tag, bei der der URL der Grafik in Hochkommata eingeschlossen werden muss. Allgemein können Sie auf die Hochkommata nicht verzichten, wenn der zugewiesene Wert solche Zeichen enthält, die in HTML als Steuerzeichen behandelt werden (also Leerzeichen, der Slash etc.).
30
Einführung
Beispiel:
Achtung
Listing 5: Ein Parameter ohne Wertzuweisung – diese Anweisung setzt einen Tabellenrahmen mit einer Dicke, die der Browser festlegt.
Es wird immer nur der einleitende Tag durch Parameter erweitert. Beim beendenden Tag wird niemals ein Parameter angegeben!
Viele Befehle lassen sich über mehr als einen Parameter spezifizieren. Diese werden dann einfach durch Leerzeichen getrennt aufgelistet. Dabei spielt die Reihenfolge der Parameter keine Rolle. Beispiele: Listing 6: Der -Tag mit zwei Parametern
Listing 7: Der -Tag mit zwei Parametern in umgekehrter Reihenfolge hat die vollkommen gleiche Wirkung.
Das Grundgerüst einer Webseite Da HTML eine äußerst fehlertolerante Beschreibungssprache ist, werden Webseiten selbst in Situationen, in denen in anderen Sprachen geschriebene Dokumente oder Programmstrukturen einen Fehler oder einen Programmabbruch auslösen würden, trotzdem oft noch brauchbare Resultate liefern. Reine HTML-Seiten sind Klartextdateien mit der Dateiendung .htm, .html oder .shtml (bis auf Sonderfälle). Alleine diese Endungen lassen das Dokument zu einem HTML-Dokument werden. Für eine HTML-Seite gibt es jedoch dennoch wie für jedes andere Dokument oder andere Programmiersprache immer ein Grundgerüst und gewisse Grundregeln. Eine korrekt aufgebaute HTML-Seite wird immer in die Anweisung am Anfang und am Ende eingeschlossen. Die beiden Anweisungen bilden immer das äußere Gerüst einer HTML-Seite. Davor dürfen höchstens Kommentarzeilen stehen, die natürlich auch überall im Inneren einer HTML-Seite verwendet werden können. Die Steuerzeichen für Kommentarzeilen sind ein Ausrufezeichen und zwei Striche am Anfang und zwei Striche am Ende des Tags. Jeder in diesem Tag stehende Text wird vom interpretierenden Browser als Kommentar betrachtet. Ein Kommentar kann über mehrere Zeilen gehen und natürlich ebenfalls im Inneren einer HTML-Seite verwendet werden. Auch ein Kommentar-Tag muss von spitzen Klammern eingeschlossen werden, also sehen die Zeichenfolgen so aus:
HTML- bzw. XHTML-Grundlagen
31
Listing 8: Ein HTML-Kommentar
Das weitere Grundgerüst einer HTML-Datei besteht grundsätzlich aus folgenden zwei Teilen: 왘 dem (optionalen) Header (Kopf) 왘 dem Body (Körper)
Nach der einleitenden HTML-Anweisung steht in einer Webseite normalerweise ein HeaderTeil, das heißt ein Kopfteil, in dem die allgemeinen Hintergrundinformationen über eine Webseite notiert werden, beispielsweise der Titel oder so genannte Metainformationen, etwa Copyright-Informationen und vor allem wichtige Angaben für Suchmaschinen. Dies erfolgt mittels des <meta>-Tags, der auf verschiedenste Art und Weise verwendet werden kann. Oft finden Sie <meta>-Tags in Verbindung mit den Attributen name und content. Über name wird eine Eigenschaft angegeben (etwa der Autor, Schlüsselwörter, aufgrund denen die Webseite in einer Suchmaschine gefunden werden soll, oder eine Beschreibung der Webseite), über content der Wert dieser damit benannten Variablen. Diese beiden Informationen bilden zusammen ein Wertepaar, das auch nur in Verbindung Sinn macht. Grundsätzlich wird ein Header mit dem Tag begonnen und mit entsprechend wieder geschlossen. Die eigentlichen Daten, die der WWW-Browser einem Anwender auf dem Bildschirm anzeigen soll, werden in den Body geschrieben. Die Tags und umschließen den Anzeigebereich einer Webseite. In dem Body ist der eigentliche Text mit Überschriften, Verweisen, Grafikreferenzen und auch die Referenz für Java-Applets zu notieren. Das vollständige Grundgerüst einer normalen HTML-Datei sieht also schematisch immer so aus. ... <meta ...> ... <meta ...> Überschriften, Text, Verweise, Grafiken, Java-Applet-Referenz usw. Listing 9: Ein schematisches Grundgerüst einer Webseite
32
Einführung
HTML versus XHTML HTML ist wie JavaScript durch verschiedene Sprachzyklen gegangen und liegt derzeit in der Version 4 vor. Diese wurde bereits 1997 (!) verabschiedet. Es ist ein Phänomen, dass sich eine dermaßen populäre und wichtige Technologie über so viele Jahre nicht weiter entwickelt hat. In der gesamten EDV der letzten Jahrzehnte werden Sie – vielleicht mit Ausnahme der Diskette – keine Technologie finden, die sich dermaßen lange auf einem Stand gehalten hat und dennoch nicht »tot« ist. Erklärbar ist dieser Entwicklungsstillstand nur, weil sich die Mitglieder des W3-Konsortiums teils spinnefeind sind und gegenseitig nach allen Regeln der Kunst zu blockieren versuchen. Andererseits stimmt es auch nicht ganz, dass HTML nicht vorangeht. Im Grunde gibt es bereits geraume Zeit einen Nachfolger von HTML 4, der aber nicht mehr HTML, sondern XHTML (Extensible HyperText Markup Language = erweiterbare Hypertext-Auszeichnungssprache) genannt wird. HTML wurde ursprünglich auf Basis von SGML (Standard Generalized Markup Language – http://www.w3.org/MarkUp/SGML/) entwickelt. SGML ist eine bereits seit den Sechzigerjahren verwendete Beschreibungssprache zur Darstellung von Inhalten auf unterschiedlichen Plattformen. Diese Metasprache erlaubt das Definieren von Auszeichnungssprachen mit Hilfe so genannter DTD-Anweisungen (Document Type Definitions = Dokumenttypdefinitionen). In den DTD-Anweisungen wird festgelegt, welche Elemente zu einer Auszeichnungssprache gehören und welche jeweils dazugehörenden Attribute. Dazu kommen noch Regeln, welche Elemente innerhalb welcher anderen Elemente vorkommen können und andere Beziehungen wie die Notwendigkeit von AbschlussTags etc. Aus SGML ist nun in jüngster Vergangenheit XML (Extensible Markup Language = erweiterbare Auszeichnungssprache) hervorgegangen. XML gestattet wie SGML die Definition von Auszeichnungssprachen mit Hilfe von DTD-Anweisungen. Wie stehen jetzt HTML und XHTML in Beziehung? Während HTML wie gesagt direkt über SGML definiert wurde, ist XHTML die erneute Definition von HTML auf Basis von XML, die aber einen neuen Namen und eine neue Versionsverwaltung erhielt. Seit Januar 2000 gibt es XHTML 1.0, und das entspricht im Grunde HTML 4.0 (dem aktuellen HTML-Standard). XHTML ist bezüglich der Einhaltung syntaktischer Regeln viel strenger als HTML, um mit anderen, aus XML aufgebauten Sprachen (etwa SVG oder WML) kompatibel zu sein und damit Daten austauschen zu können. Aber die geplanten Vorteile erstrecken sich auch auf Skriptsprachen und Stylesheet-Sprachen, die eine gemeinsame syntaktische Grundlage auf der Basis von XML erhalten können. XHTML hat sich in der Web-Community jedoch nie durchgesetzt. Der Grund ist banal – der Vorteil von XHTML ist, syntaktisch bedeutend strenger als HTML zu sein und dem Wildwuchs nichtstandardisierter Anweisungen entgegenzusteuern, die die Interpretation von Webseiten in verschiedenen Browsern so unterschiedlich werden lassen8. Aber genau diesen Sinn und Zweck von XHTML kann man dem gemeinen Webdesigner oder auch HobbyWebseitenersteller kaum begreiflich machen, wenn dieser bisher bestimmte Dinge tun durfte, die plötzlich verboten sein sollen. Und da die Masse der Webseitenersteller nicht pro-
8.
Streng genommen kann XHTML also weniger als HTML.
HTML- bzw. XHTML-Grundlagen
33
fessionell ist9, werden sich Browser-Hersteller hüten, kein HTML mehr zu unterstützen und die strengen XHTML-Regeln zu fordern. Damit dreht sich die Entwicklung im Kreis. Die Webseitenersteller sind das Prinzip der Fehlertoleranz und die laxen HTML-Regeln gewohnt und erstellen Webseiten, die sich darauf verlassen. Die Browserhersteller trauen sich nicht, strenges XHTML zu fordern, und dementsprechend sehen nur wenige Webseitenersteller ein, warum sie sich viel Arbeit machen sollen, um ein maximal gleichwertiges Resultat zu erreichen, das sie auch einfacher bekommen. Zwar gibt es in XHTML nahezu die gleichen Elemente, Attribute und Verschachtelungsregeln wie in HTML, und auch die Unterstützung von XHTML ist in den neusten Browsern gewährleistet. Aber es gibt insoweit Unterschiede, dass bestimmte Dinge gegenüber HTML erweitert, während syntaktisch Regeln verschärft wurden. Hier sind einige Unterschiede: 왘 Zu dem unter HTML üblichen Mime-Typ (Multipurpose Internet Mail Extensions) text/ html gibt es für XHTML-Dokumente noch text/xml oder application/xml. MIME bedeu-
tet einen Internet-Standard zur Spezifizierung von Dateitypen bei der Kommunikation zwischen Servern und Browser im WWW. Sowohl der Server als auch der Browser kennt bestimmte Dateitypen. Beim Übertragen vom Server zum Browser wird über das HTTPProtokoll der MIME-Typ mit übertragen. Aufgrund seiner Liste mit MIME-Typen kann der Browser eine Datei eines bekannten Typs korrekt behandeln. Werden unbekannte Dateitypen geladen, kann das Programm nicht direkt damit umgehen, sondern muss die Datei speichern oder über zusätzliche Informationsquellen (etwa einen Benutzerdialog) nach der Behandlungsweise forschen. Die Verwendung von MIME-Typen umgeht zugleich das Problem, dass viele Dateierweiterungen von mehreren Programmen bearbeitet werden können (etwa .bmp, was unter Windows von zahlreichen Grafikprogrammen bearbeitet werden kann). MIME-Typen geben eindeutig das zu verwendende Programm an. MIME-Typen werden nach folgendem Schema angegeben: Hauptkategorie/Unterkategorie.
Hauptkategorien sind etwa text, image oder audio. Unterkategorien von text sind beispielsweise plain (eine reine Textdatei), javascript (beim Einbinden von JavaScripts) oder html (eine HTML-Datei). Unterkategorien von image sind beispielsweise gif oder jpeg. Die meisten Skripteinbindungen verzichten auf diese Angabe, da Browser und Server so gut wie immer auch so zurecht kommen. Wir werden in diesem Buch ebenfalls weitgehend darauf verzichten. 왘 Die Dateierweiterungen spielen in XML-fähigen Browsern eine differenzierte Rolle, als es
bei nicht-XML-fähigen Browsern der Fall ist. Je nach Systemkonfiguration kann der Browser verschiedene Interpreter bei den Endungen .htm beziehungsweise .html und .xhtml einsetzen. Im ersten Fall wird unter Umständen der HTML-Interpreter verwendet, im zweiten der XML-Interpreter. In der Praxis heißt das, beim HTML-Interpreter greift das Prinzip der Fehlertoleranz, und syntaktisch nicht ganz fehlerfreie Dokumente werden dennoch so weit wie möglich angezeigt, während im zweiten Fall die Darstellung mit einer Fehlermeldung abgebrochen wird.
9.
Das ist nicht negativ gemeint, sondern trägt der Tatsache Rechnung, dass sehr viele Leute Webseiten privat erstellen.
34
Einführung
왘 Jede XHTML-Datei fordert als erste Anweisung eine so genannte XML-Deklaration, etwa . HTML kennt zwar die verwandte <doctype>-
Anweisung, aber die ist nicht zwingend. 왘 Das einleitende -Tag besitzt in HTML normalerweise keine Attribute, während
man in XHTML einen Namensraum angeben kann. Etwa so: .
왘 XHTML erzwingt ein strengeres Einhalten des HTML-Grundgerüsts (inklusive Header
und Body). 왘 In HTML spielt Groß- und Kleinschreibung grundsätzlich keine Rolle. XHTML und
XML unterscheiden strikt zwischen Groß- und Kleinschreibung. In XHTML sollen alle Elemente und Attribute kleingeschrieben werden. 왘 HTML-Elemente ohne Abschluss-Tag (etwa oder ) müssen in XHTML mit der
Zeichenfolge /> am Ende gekennzeichnet werden. Vor dem Schrägstrich sollte ein Leerzeichen stehen (etwa ). Alternative ist die Notation von einem Anfangs- und EndTag ohne irgendetwas (auch kein Leerzeichen) dazwischen (etwa ). 왘 In XHTML müssen alle Elemente, die in HTML einen optionalen Abschluss-Tag haben
Listing 3: HTML-Tags mit Parameter