Anzeige
Tutorialbeschreibung

Basiswissen JavaScript/DOM Teil1 - Implementierungen und HTML

Basiswissen JavaScript/DOM Teil1 - Implementierungen und HTML

JavaScript ist eine Programmiersprache, die sich ähnlich wie CSS in HTML integrieren lässt und wie CSS vom Browser ausgeführt wird. Sie erlaubt während der Anzeige einer Webseite beim Anwender dynamische Änderungen am Inhalt und Erscheinungsbild der Seite sowie einfache Benutzerinteraktion. Das Document Object Model (DOM) ist dabei der Standard für den dynamischen Zugriff auf HTML-Elemente, für die Steuerung von Anwenderereignissen usw.


Das nun folgende Tutorial ist ein Auszug aus dem Buch: Professionelle Websites von Stefan Münz.
Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Pearson Education.


Basiswissen JavaScript/DOM


Über JavaScript gibt es allein Regale voll Fachbücher. Was die tatsächliche Bedeutung dieser Sprache im professionellen Bereich der Website-Erstellung betrifft, ist jedoch ein deutlicher Rückgang in den letzten Jahren zu verspüren. Dafür gibt es verschiedene Gründe:

- Vieles, was einst mit JavaScript versucht wurde zu lösen, wird heute über Flash gelöst, wie bewegliche Newsticker, Intros und Trailer mit oder ohne Sound, oder besondere Effekte bei der Navigation. Nachdem die meisten modernen Browser mit Flash-Plug- In ausgeliefert werden, haben viele Webdesigner JavaScript in diesen Disziplinen den Rücken gekehrt.
- JavaScript ist uneinheitlich implementiert. Die Unterschiede vor allem bei etwas älteren Browsern sind so groß, dass in vielen Fällen einiger Programmieraufwand dafür erforderlich ist, Fehler in bestimmten Browsern oder Browser-Versionen zu vermeiden.
- Der W3C-Standard des DOM ist recht komplex und kommt für JavaScript zu spät. Es war zwar im Prinzip eine richtige Entscheidung, JavaScript so weit wie möglich an diesen Standard anzubinden. Das DOM ist jedoch auf XML ausgelegt und seine Entwicklung ist noch nicht abgeschlossen. Viele Webdesigner, die »mal eben« etwas »Dynamisches« programmieren wollen, scheitern zudem am Verständnis der Zusammenhänge zwischen herkömmlichem JavaScript-DOM, Kern-JavaScript und W3CDOM.
- JavaScript hat keinen astreinen Ruf. In der Vergangenheit wurde die Sprache tausendfach missbraucht, um ungebetene Popups zu öffnen, die Browser-Statuszeile ohne Einverständnis des Benutzers mit Unsinn vollzuschreiben oder das Browser-Fenster einfach auf eine bestimmte, vom »Designer« gewünschte Größe zu ändern. JavaScript geriet in den Ruf, ein Mittel zu sein, mit dem unsensible Homepage-Künstler und Werbestrategen die Seitenbesucher quälen.

Die genannten Nachteile sind der Grund dafür, warum wir JavaScript im vorliegenden Buch nicht zu viel Platz einräumen wollen. Dennoch lohnt es sich auch heute noch, sich mit JavaScript und DOM zu beschäftigen. Für Webdesigner, die »aus allen Positionen schießen« können wollen, sind Kenntnisse in JavaScript und DOM nach wie vor Pflicht.
Es gibt auch durchaus genügend Anwendungsfälle, für die JavaScript bestens geeignet ist. Dazu gehören beispielsweise:

- Überprüfen von Formulareingaben vor dem Absenden des Formulars
- Komfort-Features für Besucher wie Style-Switching oder einblendbare Zusatzinfos
- Kleinanwendungen wie Umrechner, Zinsrechner oder Kalender, die den Anwender beim eigentlichen Inhalt einer Seite unterstützen
- Präsentation mehrteiliger Inhalte ohne langes Scrollen oder Aufruf anderer Seiten

Anwendungen solcher Art kommen auch auf professionellen Sites häufig zum Einsatz. Im Praxiskapitel 8 werden wir uns deshalb auf solche Anwendungen konzentrieren. Im vorliegenden Kapitel 7 wird das notwendige Handwerkszeug vermittelt. Wir konzentrieren uns dabei auf zeitgemäßes, DOM-kompatibles JavaScript ohne historischen Ballast.

Falls Sie bislang zwar HTML und CSS kennen, aber noch nie programmiert haben, werden Sie in diesem Kapitel mit neuen, ungewohnten Konzepten konfrontiert. Zusätzlich zu den syntaktischen Konzepten der Sprache sind auch Kombinatorik und die Fähigkeit, Algorithmen zur Lösung von Aufgaben zu finden, gefragt.

Link zum Thema JavaScript-Einsatz:
JavaScript – ja oder nein?:
http://www.frixon.de/docs/javascript.html



1 Implementierungen von JavaScript und DOM

JavaScript gehört zur Gattung der Scriptsprachen. Der Programmierer notiert den Programmcode in einer High-Level-Sprache, die für Menschen recht gut lesbar ist, aber syntaktisch so präzise Regeln hat, dass der im Browser integrierte JavaScript-Interpreter den Code zur Laufzeit in ausführbaren Maschinencode umwandeln kann.
DOM ist dagegen keine bestimmte Sprache, sondern ein sprachunabhängiges Modell, das Objekte, Eigenschaften und Methoden definiert, mit deren Hilfe auf XML- und HTMLDokumente zugegriffen werden kann, aber auch Anwenderereignisse wie Mausklicks und Tastatureingaben verarbeitet werden können.

1.1 JavaScript

JavaScript wurde ursprünglich von Netscape mit dessen Browser-Version 2.0 eingeführt. Das war 1995, als das W3-Konsortium noch in seinen Kinderschuhen steckte und weit entfernt davon war, von allen Seiten als das Standardisierungsgremium für Webtechnologien akzeptiert zu werden. Um der Sprache den Rang eines Standards zu verleihen, schaltete Netscape die European Computer Manufacturers Association (ECMA) ein. Unter der Bezeichnung ECMA-262 ist JavaScript seitdem als Industriestandard definiert.

Microsoft erwarb zwar frühzeitig eine JavaScript-Lizenz, durfte für die eigene Implementierung jedoch nicht den Namen »JavaScript« verwenden. Außerdem wollten die Redmonder eine Scriptsprache, die auch andere Aufgaben wahrnimmt und sich in den Windows Scripting Host integriert. Die Scriptsprache wurde JScript getauft. Außerdem interpretiert der Internet Explorer noch das ältere Visual Basic Script (VBScript). Während VBScript jedoch eine eigene Syntax hat, sind Syntax und Teile der Objektstruktur von JScript so weit deckungsgleich mit JavaScript, dass es genügt, in HTML einen Script- Bereich als Bereich für JavaScript auszuzeichnen. Der Internet Explorer interpretiert den Code.
Die aktuelle Version von JavaScript ist 1.5. Eine Version 2.0 ist in Entwicklung. Es ist jedoch fraglich, ob die zahlreichen Neuerungen der Version 2, die vor allem das Konzept der Objektorientierung wesentlich konsequenter umsetzt als bislang der Fall, in der Praxis überhaupt Erfolg haben werden.

Die stabile Sprachstandard-Version 1.5 entstand im Jahr 2000 und wurde gemeinsam von Netscape und Sun für den völlig neuen, auf der Gecko-Engine basierenden Netscape-6- Browser entwickelt. Entscheidend in dieser Version war die Reduktion von JavaScript auf einen relativ überschaubaren JavaScript-Kern mit nur wenigen Objekten, Methoden und Eigenschaften. Für die übrigen Angelegenheiten vom Zugriff auf HTML-Inhalte bis hin zum Event-Handling sollten JavaScript- nterpreter einfach das vom W3-Konsortium spezifizierte DOM umsetzen.

Links zu JavaScript-Spezifikationen:
JavaScript 1.5 Spezifikation:
http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
JavaScript 1.3 Reference:
http://docs.sun.com/app/docs/doc/816-6408-10
JavaScript 1.3 Guide:
http://docs.sun.com/app/docs/doc/816-6409-10



1.2 DOM (Document Object Model)

Das DOM ist wie HTML und CSS ein vom W3-Konsortium entwickelter Standard und hat damit eine hohe Bindungskraft im Web. Es ist sowohl für client- als auch für serverseitige Programmierung einsetzbar. Gedacht ist es als Ergänzung zum XML-Universum. Während Markup-Sprachen der XML-Familie Datenstrukturen auszeichnen, stellt das DOM eine Schnittstelle für Programmiersprachen zur Verfügung, um auswählbare Einzeldaten oder Datengruppen in XML- Dokumenten lesen, ändern und löschen zu können, um ihnen Style-Definitionen aus Sprachen wie CSS oder XSL zuordnen zu können und um Ereignisse zu behandeln, die mit diesen Daten geschehen können. Herkömmliches HTML (also nicht XHTML) ist zwar keine XML-basierte Sprache, doch auch hierauf ist der Zugriff über das DOM möglich. Fast alle modernen, im Web eingesetzten Programmiersprachen nutzen die Schnittstelle, die das DOM bietet.

Die aktuell als Empfehlung (Recommendation) vorliegende DOM-Version ist 3.0. Vieles davon ist jedoch in Zusammenhang mit JavaScript gar nicht von Bedeutung. Die wichtigsten Methoden und Eigenschaften für den Zugriff auf einzelne HTML-Elemente und -Attribute waren schon Bestandteil von DOM 1.0 und die DOM-Vorgaben für den Zugriff auf CSS-Definitionen und Event-Handling sind seit DOM-Version 2.0 standardisiert. Die JavaScript-Interpreter der verschiedenen Browser unterstützen das DOM sicher nicht vollständig und einheitlich. Für die Praxis genügt das, was Internet Explorer 6.0 (mit Einschränkungen auch schon Internet Explorer 5.x), Gecko-Browser (wie Netscape ab Version 6.0, Mozilla, Firefox usw.) und Opera ab Version 7.0 bieten, jedoch in der Regel.

Das spezielle Problem bei JavaScript ist, dass es – historisch bedingt – mehrere Objektmodelle mit sich herumschleppt, die parallel implementiert sind. Da die klassischen Objektmodelle von Netscape und Microsoft in Dokumentationen und Büchern auch immer noch vielfach wie aktuelle Standards angepriesen werden, werden sie immer noch viel ernster genommen, als sie es eigentlich sind. Moderne Webseiten sollten bei Verwendung von JavaScript jedoch wenn irgend möglich nur noch DOM-kompatibel arbeiten. Deshalb werden wir in diesem Buch auch keine Rücksicht mehr auf die veralteten, seit mehreren Jahren überholten Objektmodelle nehmen. Alle Beispiele werden so weit möglich die DOM-gerechte Syntax verwenden.

Link zum Thema DOM:
W3C-Startseite zum Thema DOM:
http://www.w3.org/DOM/


2 JavaScript in HTML

Ähnlich wie bei CSS gibt es drei Stellen, an denen JavaScript-Code vorkommen kann:

- Innerhalb von HTML-Elementen, genauer, als Wertzuweisung an ein Event-Handler- Attribut
- In Script-Bereichen innerhalb des HTML-Dokuments, markiert durch das dafür vorgesehene script-Element
- In separaten Textdateien mit der Standardendung .js, die in HTML referenziert werden können

Anhand von einfachen Beispielen werden wir die drei Varianten vorstellen.

2.1 Event-Handler und JavaScript

Ein Event-Handler kann in einleitenden HTML-Tags in der Form eines Attributs notiert werden. Als Wert wird einem solchen Attribut JavaScript-Code zugewiesen. Im nachfolgenden Beispiel erhält ein p-Element zwei Event-Handler: onmouseover und onmouseout.

<p style="cursor:pointer"
onmouseover="this.innerHTML='Hallo Maus!'"
onmouseout="this.innerHTML='Komm zu mir, Maus!'">
Komm zu mir, Maus!
</p>

Bilder

Abbildung 7.1: p-Element mit Text, der sich beim Überfahren mit der Maus ändert

Der Event-Handler onmouseover= bedeutet: »wenn und solange der Mauszeiger sich über der Elementbox befindet«. Diese Formulierung legt auch schon nahe, in welchen HTMLElementen dieser Event-Handler notiert werden kann: in allen Elementen, die zumindest potenziell eine sichtbare Ausdehnung im Browser-Fenster haben. Es kann sich also um Überschriften, Textabsätze, Tabellenzellen, Listenpunkte, aber auch um Inline-Elemente wie Hyperlinks, betonten Text oder um Grafikreferenzen handeln. Das Gleiche gilt für den Event-Handler onmouseout= (»wenn die Maus aus der Elementbox herausbewegt wird«).
Im obigen Beispiel hat der Textabsatz in HTML als Elementinhalt den Text Komm zu mir, Maus!. Wird der Mauszeiger in den Bereich bewegt, den die Elementbox des Absatzes einnimmt, wird der JavaScript-Code ausgeführt, der beim Event-Handler onmouseover= notiert ist. Dieser Code besteht im Beispiel aus einer einzigen Anweisung, welche den Elementinhalt des Absatzes gegen einen anderen Text (Hallo Maus!) austauscht.

Der geänderte Text würde nun einfach so stehen bleiben. Wir möchten jedoch, dass der Ursprungstext wiederhergestellt wird, wenn der Anwender die Maus aus der Elementbox wieder herausbewegt. Das entsprechende Ereignis kann mit dem Event-Handler onmouseout= abgefangen werden. Der JavaScript-Code, der bei Eintritt dieses Ereignisses ausgeführt wird, tauscht den Elementinhalt abermals aus, diesmal jedoch mit dem ursprünglichen Text.
Da der ursprüngliche Text in JavaScript zwischenzeitlich nirgendwo gespeichert war, muss er bei onmouseout= explizit noch mal angegeben werden. Das ist der Grund, warum der Text Komm zu mir, Maus! insgesamt zweimal vorkommt: einmal als normaler Elementinhalt und einmal zur »Wiederherstellung« bei onmouseout.
Auf die Syntax des JavaScript-Codes gehen wir an dieser Stelle noch nicht detailliert ein. Nur so viel zum Verständnis: Über das Schlüsselwort this ist es in JavaScript möglich, auf ein »aktuelles Objekt« zuzugreifen, und innerHTML ist eine Objekteigenschaft, nämlich der Inhalt eines HTML- Elements. Die Objekteigenschaft innerHTML ist übrigens eine »schmutzige « Eigenschaft, die nicht ganz der DOM-Philosophie entspricht und nicht zum Standard gehört bzw. nur zum so genannten »DOM Level 0«, welches speziell für den Zugriff auf HTML entwickelt wurde. Die innerHTML- igenschaft ist jedoch sehr praktisch und in allen modernen Browsern implementiert, so dass es unsinnig wäre, sie nicht zu verwenden. Abbildung 7.1: p-Element mit Text, der sich beim Überfahren mit der Maus ändert Im Beispiel wird der innerHTML-Eigenschaft durch das Gleichheitszeichen ein Wert zugewiesen. Das ganze Konstrukt ist eine einzelne JavaScript- Anweisung.

Das Beispiel enthält neben den Event-Handlern im style-Attribut noch eine CSS-Eigenschaft, die wir bislang nicht behandelt haben: cursor. Diese Eigenschaft erlaubt es, den Mauszeiger zu verändern. Sinnvoll ist dies in aller Regel aber nur in Verbindung mit Script-Reaktionen. Mit cursor:pointer wird eine Art Mauszeiger erzeugt, wie er beim Überfahren von Hyperlinks verwendet wird. Die Cursor-Definition gilt jedoch nur für das p-Element. Der Browser ändert den Mauszeiger also nur, solange dieser sich über dem Elementbereich des p-Elements befindet, und stellt anschließend automatisch den Normalzustand wieder her. Weitere mögliche Angaben zur Cursor- igenschaft finden Sie in der CSS-Referenz im hinteren Buchteil.

Event-Handler in HTML
Da die Event-Handler als Attribut in HTML notiert werden, regelt die HTML-Spezifikation auch, welche Event-Handler-Attribute es gibt und in welchen HTML-Elementen sie vorkommen dürfen. Einige Browser, allen voran der Internet Explorer, unterstützen daneben zahlreiche weitere Event- Handler, die jedoch an JScript orientiert und proprietär sind. Die nachfolgende Tabelle listet die offiziellen Event-Handler und ihre Einsatzmöglichkeiten auf.

Bilder


Event-Handler können also der Auslöser für die Ausführung von JavaScript-Code sein. Der Code wird ausgeführt, wenn das entsprechende Ereignis eintritt.

2.2 JavaScript-Bereiche in HTML

Es ist durchaus möglich, in der Wertzuweisung an einen Event-Handler mehrere Java- Script- Anweisungen auszuführen. Doch Wertzuweisungen an HTML-Attribute eignen sich nur begrenzt für längere Anweisungssequenzen. Dazu sind Script-Bereiche besser geeignet. In einem Script- ereich können unter anderem auch Funktionen stehen, die mehrere Anweisungen ausführen. Bei der Wertzuweisung an einen Event-Handler genügt es dann, als einzige Anweisung die gewünschte Funktion aufzurufen. Deren Anweisungen werden dann ausgeführt.

Ein Script-Bereich für JavaScript wird in HTML folgendermaßen ausgezeichnet:

<script type="text/javascript">
</script>

Der Script-Inhalt wird durch <script>...</script> eingeschlossen. Pflicht ist die Angabe des type-Attributs. Diesem Attribut wird als Wert der Mime-Type der verwendeten Scriptsprache zugewiesen. Für JavaScript lautet der Mime-Type text/javascript.

Wenn der Script-Inhalt keinen HTML-Output erzeugt und keine dynamischen Änderungen im HTML-Strukturbaum vornimmt, ist es sinnvoll, im einleitenden <script>-Tag zusätzlich das Standalone-Attribut defer zu notieren (Notation bei XHTML: defer="defer"). Dieses Attribut teilt dem Browser mit, dass er mit der Darstellung des gerade eingelesenen Dokuments fortfahren kann, ohne erst den Scriptinhalt interpretiert zu haben. Das kann in manchen Fällen dazu beitragen, dass eine Seite wahrnehmbar schneller angezeigt wird.

Die XHTML-Problematik bei Script-Bereichen
Falls Sie XHTML einsetzen, ist es zweckmäßig, den Inhalt des script-Elements mit der dafür vorgesehenen XML-Syntax als CDATA-Bereich auszuzeichnen. CDATA steht für character data und weist den Parser an, dass HTML-eigene Zeichen innerhalb eines solchen Bereichs nicht als HTML-Syntax interpretiert werden. Das Konstrukt lautet dann:

<script type="text/javascript">
//<![CDATA[
//]]>
</script>

Die Zeichenfolge <![CDATA[ leitet in XML einen CDATA-Bereich ein. Alles bis zur Zeichenfolge ]]> wird dann als »frei von Markup« behandelt. Die einleitende Zeichenfolge und die beendende Zeichenfolge sollten je in einer eigenen Zeile notiert werden. Beiden Zeichenfolgen sollten außerdem wie im Beispiel gezeigt je zwei Schrägstriche // vorangestellt werden. Dadurch wird verhindert, dass der JavaScript-Interpreter die XML-spezifischen Zeichenfolgen als JavaScript- ode interpretiert, was aus JavaScript-Sicht Fehler produzieren würde. Die beiden Schrägstriche bedeuten in JavaScript-Bereichen einen Kommentar. Alles bis zum Zeilenende wird vom JavaScript- Interpreter ignoriert.
Der Hintergrund ist, dass Script-Bereiche in HTML automatisch als CDATA gelten. In XHTML ist der Elementinhalt des script-Elements jedoch als PCDATA definiert, was aber wie bei Text innerhalb anderer Elemente bedeutet, dass Zeichen wie < und & maskiert werden müssen. Diese Zeichen kommen in JavaScript jedoch öfter vor. Mit der maskierten Form wie &lt; könnte der JavaScript-Interpreter jedoch nichts anfangen und würde einen Fehler melden.

Leider ist die Problematik damit noch nicht zu Ende. Einige Browser verstehen die XMLNotation für CDATA-Bereiche nicht, was dann doch JavaScript-Fehler produziert. Das W3-Konsortium und auch andere Fachleute empfehlen daher, JavaScript-Code bei XHTML grundsätzlich in externe Dateien auszulagern und diese einzubinden.

Ein Beispiel:

<script type="text/javascript" src="beispiel.js"></script>

Die Einbindung erfolgt ebenfalls über das script-Element und zwar im src-Attribut. Angegeben werden kann ein beliebiger URI. Die JavaScript-Datei ist eine normale Textdatei mit JavaScript-Code und sollte die Standardendung .js haben. Das script-Element sollte selbst keinerlei Inhalt haben. Auf diese Weise lässt sich das Problem für alle Browser beheben.

Event-Handler und Script-Bereich
Mit dem nachfolgenden Beispiel soll das typische Zusammenspiel zwischen Event-Handler und Script-Bereich deutlicher werden.

Listing 7.1: HTML-Dokument mit Script-Bereich, Script und Event-Handler
Bilder


Bilder

Abbildung 7.2: Städte-Einwohner-Script und seine Wirkung

Das Beispiel ist ein Anwendungsfall der Sorte »Information interaktiv und nicht linear vermitteln«. Im Beispieldokument kann der Anwender in einem Formular aus einer Auswahlliste eine Stadt auswählen. Klickt er auf den Button mit der Aufschrift Ergebnis, wird die Einwohnerzahl der Stadt unterhalb des Buttons ausgegeben.

Betrachten wir dazu zunächst das HTML-Formular mit der Auswahlliste und dem Button Ergebnis. Im einleitenden <form>-Tag fällt das action-Attribut mit der ungewöhnlichen Wertzuweisung javascript:void(0) auf. Eigentlich möchten wir bei diesem Formular überhaupt keine »Aktion«. Da das action-Attribut aber HTML-seitig ein Pflichtattribut ist, muss es, um das Dokument nicht syntaktisch fehlerhaft werden zu lassen, angegeben werden. Die Wertzuweisung ist zwar vom Typ her ein URI, doch javascript: ist kein offizielles Schema. Die Browser erkennen es jedoch und wissen, dass in diesem Fall keine andere Seite aufgerufen werden muss, sondern die aktuelle Seite geladen bleibt. Allerdings wird auch der JavaScript-Interpreter aktiv, denn hinter javascript: kann ähnlich wie bei der Wertzuweisung an einen Event-Handler JavaScript-Code notiert werden. Die Anweisung void(0) bewirkt einfach gar nichts. Das Konstrukt action="javascript:void(0)" ist also empfehlenswert für Formulare, die ausschließlich mit JavaScript zusammenarbeiten.

Weiterhin beachtenswert ist im HTML-Quelltext das p-Element mit dem id-Namen result im unteren Dokumentabschnitt. Das Element hat lediglich ein erzwungenes Leerzeichen (HTML-Entity &nbsp;) als Inhalt. Der Grund ist, dass die Elementbox zwar schon in der Höhe einer Textzeile angezeigt werden, zunächst jedoch noch keinen sichtbaren Inhalt enthalten soll. Der Inhalt wird mithilfe von JavaScript dynamisch in das Element geschrieben.

Die Schnittstelle zwischen dem Formular und JavaScript ist der Button mit der Aufschrift Ergebnis (markiert durch <button> ... </button>). In seinem einleitenden Tag enthält dieses Element ein Event-Handler-Attribut onclick=. Die Wertzuweisung lautet ganz schlicht tell_result(). An den runden Klammern ist erkennbar, dass es sich dabei um einen Java- Script-Funktionsaufruf handelt.

Auf die Einzelheiten der JavaScript-Syntax werden wir auch in diesem Beispiel noch nicht näher eingehen. Wichtig ist zunächst nur, dass Sie die Verknüpfung von Event-Handler und ausgeführtem JavaScript-Code erkennen.
Im Kopfbereich des HTML-Dokuments, also zwischen <head> und </head>, ist ein script- Element notiert. Als Inhalt enthält es JavaScript-Code.
Der Code besteht aus der Funktion tell_result(). Alles, was zwischen der öffnenden geschweiften Klammer hinter dem Funktionsnamen und der schließenden geschweiften Klammer in der letzten Zeile vor dem schließenden </script>-Tag steht, gehört zu dieser Funktion. JavaScript- Anweisungen, die in einem script-Bereich außerhalb jeder Funktion stehen, werden direkt beim Einlesen des Dokuments ausgeführt. Alles, was wie im Beispiel innerhalb einer Funktion steht, wird dagegen nur dann ausgeführt, wenn die Funktion explizit aufgerufen wird. Das ist im Beispiel der Funktion tell_result() bei Eintritt des Event onClick= beim Button Ergebnis der Fall, also dann, wenn der Anwender auf diesen Button klickt.

Die Funktion tell_result() wertet aus, welcher der drei Listeneinträge bei den Städtenamen ausgewählt ist. Abhängig vom ausgewählten Eintrag schreibt sie mit der bereits bekannten innerHTML-Eigenschaft die Einwohnerzahl der ausgewählten Stadt.

Der richtige Ort für JavaScript-Bereiche
In unserem Beispiel steht das script-Element innerhalb der Kopfdaten des HTML-Dokuments. Das ist auch der übliche Ort, wenn das Script vorwiegend aus Funktionen besteht, die erst bei Eintritt von Events oder von anderen Funktionen aufgerufen werden oder wenn es Anweisungen enthält, die zwar direkt beim Einlesen ausgeführt werden, aber keine Ausgaben ins Browser-Fenster schreiben.
Das script-Element darf jedoch auch innerhalb des body-Elements und beliebiger Blockund Inline- Elemente vorkommen. Innerhalb des body-Bereichs sollte ein script-Bereich jedoch nur dann notiert werden, wenn sein Code direkt beim Einlesen ausgeführt wird und wenn dieser entweder direkt an der betreffenden Stelle HTML-Code erzeugen soll oder wenn er sich auf ein Element im Dokumentbaum bezieht, das dem Browser zum Zeitpunkt der Scriptausführung bereits bekannt sein muss. Ein Beispiel soll dies verdeutlichen:

Listing 7.2: Script-Bereich im body-Bereich
Bilder


Bilder

Abbildung 7.3: Vom Script generierter Inhalt im Fußbereich

Das HTML-Dokument enthält in den Kopfdaten unter anderem eine Meta-Angabe zum Autor der Seite. Diese Meta-Angabe erhält den id-Namen author. Im body-Teil enthält das Dokument zunächst etwas Text, bestehend aus einer Überschrift und einem Textabsatz.
Dann folgt ein zweiter Textabsatz, also ein p-Element. Dieses enthält jedoch keinen statischen Text als Elementinhalt, sondern einen Script-Bereich.

Der Code innerhalb dieses Bereichs steht nicht in einer Funktion, wird also direkt beim Einlesen des Dokuments vom JavaScript-Interpreter ausgeführt. Das Script ermittelt zunächst den aktuellen URI des Dokuments mit der Objekteigenschaft document.URL. Dann ermittelt es den Autorennamen aus dem Wert, der beim entsprechenden Meta-Tag dem content-Attribut zugewiesen wurde. Und schließlich ermittelt es noch das aktuelle Kalenderjahr. Mithilfe der Objektmethode document.write() schreibt das Script am Ende die ermittelten Daten ins Dokument an die aktuelle Stelle, also in den Elementinhalt des p-Elements, welches den script-Bereich umschließt.

2.3 JavaScript in separaten Dateien

Für XHTML ist es, wie bereits beschrieben, die sauberste Lösung, JavaScript-Code nicht direkt als Elementinhalt zwischen <script> und </script> zu notieren, sondern besser in separaten Dateien, die im einleitenden <script>-Tag referenziert werden können. Aber auch bei Verwendung von SGML- basiertem HTML ist es häufig besser, JavaScript-Code auszulagern. Das gilt vor allem für Code, der auf mehreren oder gar allen Seiten benötigt wird. Dazu ein Beispiel. Zunächst der Inhalt einer separaten JavaScript-Datei:

Listing 7.3: JavaScript-Datei mit Funktion für Datumsausgabe
Bilder

Eine JavaScript-Datei ist eine einfache Textdatei, die nichts anderes als JavaScript-Code enthalten darf. In unserem Beispiel enthält sie nichts anderes als eine Funktion namens show_date(). Die Funktion erwartet beim Aufruf als Parameter id_name den id-Namen eines Elements. Sie ermittelt das aktuelle Datum inklusive Wochentag und schreibt das Ergebnis am Ende ordentlich formatiert mit innerHTML in das Element mit dem im Parameter übergebenen id-Namen.

Auch an dieser Stelle sind die genauen Details im Code noch nicht so wichtig. Wichtig ist zu erkennen, dass die Funktion show_date() so, wie sie in der Datei notiert ist, sehr allgemein gehalten ist. Sie kann also in verschiedensten Kontexten bemüht werden. In unserem Beispiel speichern wir die JavaScript-Datei unter dem Namen functions.js ab. Nachfolgend das Listing eines HTML- Dokuments, welches diese JavaScript-Datei einbindet und mit der darin enthaltenen Funktion show_date() arbeitet.

Listing 7.4: HTML-Datei mit eingebundenem Script für Datumsausgabe
Bilder


Bilder

Abbildung 7.4: Aktuelle Datumsanzeige mit Funktion aus externer JavaScript-Datei

Im HTML-Kopfbereich wird ein Script-Bereich notiert. Dieser hat selber keinen Inhalt, bindet jedoch über das src-Attribut im einleitenden <script>-Tag die externe Datei functions. js ein, welche die Funktion show_date() enthält.
Es ist selbstverständlich zulässig, innerhalb eines Script-Bereichs, der eine externe Java- Script-Datei einbindet, zusätzlich JavaScript-Code zu notieren. Der JavaScript-Interpreter behandelt in diesem Fall den Code aus der externen Datei und den Code des Elementinhalts wie ein zusammenhängendes Script.

Das src-Attribut erwartet als Wertzuweisung einen URI. Die eingebundene JavaScript- Datei kann also lokal oder auch über eine vollständige Internetadresse referenziert werden. Beachten Sie aber, dass bei der Einbindung von JavaScript-Dateien von einer anderen als der aktuellen Domain je nach Serverkonfiguration Probleme auftreten können.

Im obigen Beispiel wird die externe Scriptdatei zunächst nur eingebunden. Die Funktion show_date() wird erst im einleitenden <body>-Tag aufgerufen, und zwar über den Event- Handler onLoad=. Die Funktion wird dadurch also erst dann aufgerufen, wenn das Dokument vollständig geladen ist.

Übergeben wird der Funktion als erwarteter Parameter der Wert 'date'. Wie weiter oben bereits erklärt, interpretiert die Funktion show_date() diesen Wert als id-Namen eines im Dokument enthaltenen Elements. Das von ihr erzeugte aktuelle Datum schreibt sie als Elementinhalt in dieses Element.
Innerhalb des body-Bereichs ist deshalb ein entsprechendes p-Element mit dem id-Namen date notiert. Als Elementinhalt hat es zunächst nur ein erzwungenes Leerzeichen (&nbsp;). Damit dehnt der Browser das Element bereits beim Einlesen auf die gewünschte Größe einer Textzeile aus und braucht später nichts mehr an der Position der Seiteninhalte zu korrigieren.
Zum Zeitpunkt des Aufrufs von show_date() ist das Dokument vollständig geladen, d.h., auch das p-Element date ist bekannt. Die Funktion kann nun problemlos den Inhalt dieses Elements mit dem aktuellen Datum füllen.

 

Das Tutorial ist ein Auszug aus dem Buch von Stefan Münz:

Professionelle Websites - Programmierung, Design und Administration von Webseiten
Addison-Wesley, 2. Auflage, 1136 Seiten, gebunden, komplett in Farbe, mit DVD

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von
Pearson Education.

Mehr Informationen zu diesem wunderbaren Fachbuch für Webmaster und Webentwickler
gibt es hier: Professionelle Websites

Alle Teile des Buches: 

1 Intro
2 HTML und CSS
3 Dynamische Seiten mit JavaScript/DOM
4 Die Server-Seite
5 PHP und MySQL
6 XML
7 Betrieb von Websites
8 Referenz
Bilder

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von imac123
  • 30.09.2014 - 22:33

Dankeschön ...Gruss...

Portrait von MaoMao
  • 09.01.2013 - 17:09

Gute Tutorial leicht erklärt.

Portrait von siggedy
  • 02.06.2010 - 21:57

Dankeschön gut erklärt!

Portrait von staxx78
  • 27.02.2010 - 15:52

Hier hab ich gelernt mit CSS umzugehen, jetzt versuchen wir mal JS

Portrait von milastar
  • 02.02.2010 - 13:51

genau das was ich gebraucht hab!

Portrait von mephista
  • 28.08.2009 - 09:27

super gemacht..., na dann auf zum lernen :-)

Portrait von Ramithep
  • 14.07.2009 - 18:07

Den Beitrag finde ich gut und ich werde mich dransetzen und mich durchbeißen.

THX4UP

Portrait von notcan
  • 07.05.2009 - 21:48

sehr gut und für Anfänger geeignet

x
×
×