Anzeige
Tutorialbeschreibung

Basiswissen JavaScript/DOM Teil3 - Zugriff auf Seiteninhalte

Basiswissen JavaScript/DOM Teil3 - Zugriff auf Seiteninhalte

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 .


4 Zugriff auf Seiteninhalte (DOM)


Das eigentlich Spannende an JavaScript ist, Seiteninhalte nachträglich dynamisch zu ändern. Denn dadurch eröffnen sich zahlreiche Möglichkeiten:
- In Verbindung mit Mausereignissen können bestimmte Inhalte ein- und ausgeblendet werden, z.B. Zusatzinformationen oder als direkte Reaktion auf eine vom Anwender getroffene Auswahl.
- Inhalte können sich automatisch bewegen, z.B. als automatisch scrollende News.
- Inhalte können anders angeordnet werden, z.B. lassen sich Tabellen sortieren.
- Navigationseffekte wie explorerartige Menüs sind möglich.

Dank der durch das DOM vereinheitlichten Zugriffssyntax auf einzelne Bestandteile im HTML- Quelltext ist es keine Hexerei mehr, etwas Derartiges zu programmieren. Lange Zeit war das anders, als browser-spezifische, völlig inkompatible DOM-Konzepte nebeneinander existierten. Diese Zeiten sind mittlerweile jedoch so weit in die Vergangenheit gerückt, dass man die alten Modelle getrost vergessen darf. Da Webseiten grundsätzlich auch bei deaktiviertem JavaScript einwandfrei funktionieren sollten, ist es problemlos möglich, einfach alle Browser, deren JavaScript-Interpreter noch keine W3-gerechte DOMSyntax beherrschen, von der weiteren Ausführung eines Scripts auszuschließen. Die Anzahl solcher Browser dürfte mittlerweile längst geringer sein als die Anzahl derer, bei denen ihre Anwender JavaScript generell deaktiviert haben.

Der vorliegende Abschnitt enthält keine systematische Beschreibung des DOM, sondern geht gezielt auf diejenigen Bestandteile ein, die für die JavaScript-Praxis mit HTML von Bedeutung sind.

4.1 Zugriff auf Elemente und Elementinhalte

Das DOM begreift das gesamte Markup eines XML- oder HTML-Dokuments als Hierarchie aus nodes (zu Deutsch: Knoten). Das Ausgangsobjekt für den Zugriff auf einzelne Bestandteile des Markup und des Inhalts ist das document-Objekt.
Das document-Objekt stellt unter anderem eine ganze Reihe wichtiger Methoden zur Verfügung, um schnell und gezielt auf einzelne Elemente im Dokument zugreifen zu können. Dazu müssen Sie die drei folgenden Methoden kennen:
- document.getElementById() erlaubt den direkten Zugriff auf ein Element, das mit dem Attribut id= im einleitenden Tag einen dokumentweit eindeutigen Namen erhalten hat.
- document.getElementsByName() erlaubt den direkten Zugriff auf Elemente, die mit dem Attribut name= im einleitenden Tag einen Namen erhalten haben. Da solche Namen auch mehrfach vorkommen können, beispielsweise bei zusammengehörigen Elementen des Typs <input type="radio" name="gemeinsamer_Name">, werden gefundene Elemente in jedem Fall in einem Array gespeichert, auch wenn nur ein Element gefunden wird.
- document.getElementsByTagName() erlaubt den direkten Zugriff auf Elemente auf Grund ihres Elementnamens, also body, h1, blockquote, td usw. Da solche Namen ebenfalls mehrfach vorkommen können, werden gefundene Elemente auch in diesem Fall in einem Array gespeichert,
selbst wenn nur ein Element gefunden wird.

Bei allen drei Methoden werden die ermittelten Elemente als Objekt gespeichert, und zwar als Objekt des Typs »Knoten«. Die drei Methoden erlauben also den schnellen Zugriff auf bestimmte Elemente. Ohne Aufruf von Objekteigenschaften, Objektmethoden oder Unterobjekten des ermittelten Objekts ist jedoch kein Zugriff auf konkrete Daten oder Inhalte des Elements möglich.

Ein Beispiel soll den Umgang mit den genannten Methoden des document-Objekts demonstrieren. Dabei werden wir auch einige Eigenschaften des Knotenobjekts kennen lernen.

Listing 7.11: HTML-Dokument mit Script und DOM-Zugriffen

Bilder


Das HTML-Dokument besteht innerhalb des body-Elements zunächst aus einem div- Bereich mit dem id-Namen text. Es ist der Bereich, der in der Abbildung grau umrandet erscheint. Der div- Bereich enthält eine h1-Überschrift sowie eine Reihe von Textabsätzen (p-Elemente). Unterhalb des umrandeten div-Bereichs ist eine h1-Überschrift »Statistik« notiert und darunter ein Textabsatz, der am Ende eine leere <strong></strong>-Markierung enthält.

Unterhalb all dieser Elemente ist ein script-Bereich notiert. Der script-Bereich befindet sich an dieser Stelle, weil sein Code nicht innerhalb von Funktionen steht, also gleich beim Laden ausgeführt wird. Da sich seine Anweisungen aber auf HTML-Elemente des Dokuments beziehen, müssen diese dem Browser zum Zeitpunkt der Scriptausführung schon bekannt sein.

Bilder

Abbildung 7.13: Angezeigtes Ergebnis der DOM-Zugriffe im Browser

Die erste Anweisung im Script lautet:

var blind_text = document.getElementById('text');

Durch document.getElementById('text') wird auf das Element mit dem id-Namen text zugegriffen. Im Beispieldokument ist dies das div-Element mit dem grauen Rahmen. Ermittelt wird, wie bereits erwähnt, das Knotenobjekt des Elements. Durch die Zuweisung an die Variable blind_text wird diese zu einem Speicher des entsprechenden Element- Knotenobjekts. Die Anweisung hat lediglich den Zweck, mit blind_text eine verkürzte Schreibweise für document.getElementById('text') zu definieren.
Als Nächstes wird eine Variable namens elem_count mit 0 initialisiert. In dieser Variable soll die Anzahl der p-Elemente im div-Bereich text gespeichert werden, also die Blindtextabsätze im grau umrahmten Bereich ohne die Überschrift.

Um die Anzahl der p-Elemente unterhalb des div-Elements text zu zählen, werden in einer for- Schleife alle Kindknoten dieses Elements ermittelt. Das Objekt des Elements text ist ja in der Variablen blind_text gespeichert. Um auf Kindknoten eines Knotenobjekts zugreifen zu können, gibt es das Unterobjekt childNodes. In blind_text.childNodes sind also alle Kindknoten des div- Elements text gespeichert, und zwar als Array aus Knotenobjekten. Da es sich um einen Array handelt, ist die Eigenschaft length anwendbar. In der for-Schleife können wir diese Eigenschaft für die Formulierung der Durchlaufbedingung gut gebrauchen. So können wir mithilfe der for-Schleife alle Kindknoten des Elements der Reihe nach durchgehen und prüfen.

Geprüft soll werden, ob es sich beim jeweils aktuellen Kindknoten um einen Knoten des Typs »Element« handelt. Dazu gibt es die Objekteigenschaft nodeType. Diese Eigenschaft speichert in Form einer Nummer, um welche Art von Knoten es sich handelt. Nachfolgende Tabelle listet die möglichen Nummern auf:

Bilder


In unserem Beispiel werden alle Kindelemente gesucht. Deshalb wird in der Bedingung gefragt, ob nodeType == 1 ist. Außerdem sollen nur p-Elemente gefunden werden. Deshalb wird mit logischem Und (&&) eine zweite Bedingung aufgestellt, die erfüllt ist, wenn node- Name.toLowerCase() == 'p'. Dabei ist nodeName wieder eine Objekteigenschaft des Knotenobjekts. Wenn es sich um einen Knoten des Typs Element handelt, wird darin der Elementname als Zeichenkette gespeichert. Da JavaScript zwischen Groß- und Kleinschreibung unterscheidet, wenden wir die Methode toLowerCase() auf diese Zeichenkette an und können sichergehen, dass der Vergleich klein geschriebene Elementnamen erzwingt.

Nur wenn beide Bedingungen der if-Abfrage (Knotentyp Element und Element namens p) erfüllt sind, wird die abhängige Anweisung ausgeführt. Diese besteht darin, den Wert der Variablen elem_count um 1 zu erhöhen.
Nach Beendigung der for-Schleife steht in elem_count die Anzahl der p-Elemente, die sich innerhalb des div-Elements text befinden. Das Ergebnis wird nun noch dynamisch ins Dokument eingefügt, und zwar als Elementinhalt des strong-Elements. Da dieses keinen id-Namen hat, bleibt nur, es über document.getElementsByTagName('strong') zu ermitteln. Die Methode liefert einen Array aller strong-Elemente. Da es nur ein strong-Element im Dokument gibt, kann mit document.getElementsByTagName('strong')[0] darauf zugegriffen werden.

Als Objekteigenschaft wird diesmal innerHTML verwendet. Diese bereits bekannte »Schlamper- Eigenschaft« ermöglicht es sehr bequem, HTML-Code in ein Element einzufügen. Durch Zuweisung von elem_count an innerHTML wird der Wert von elem_count als Inhalt in das strong- Element eingefügt.

4.2 Elemente erzeugen und integrieren

Über das DOM ist es nicht nur möglich, auf vorhandene Bestandteile des Markup eines Dokuments zuzugreifen, sondern auch, neue Bestandteile zu erzeugen und in die Dokumentstruktur zu integrieren. Das funktioniert zwar auch mit der innerHTML-Eigenschaft, doch in diesem Abschnitt zeigen wir, welche Methoden das DOM für entsprechende Zwecke favorisiert.
Das nachfolgende Beispiel zeigt, wie eine Seite Anwendereingaben in den Seiteninhalt integrieren kann.

Listing 7.12: Einfügen von Seiteninhalten auf Grund von Anwendereingaben
Bilder


Bilder

Abbildung 7.14: Seiteninhalt bei Anfangszustand und Zustand nach Anwendereingaben

Das Beispieldokument enthält ein Formular mit zwei Eingabefeldern und zwei zugehörigen Buttons mit der Aufschrift OK. Bei Anklicken eines OK-Buttons wird der im Feld links davon eingegebene Name rechts vom Formular in eine Aufzählungsliste übernommen und das Eingabefeld wird für die nächste Eingabe geleert. Das Beispiel zeigt, wie eine Seite Anwenderdaten ohne komplizierte Formulare sammeln kann und wie sie dem Anwender außerdem noch ein attraktives Feedback seiner Eingaben anzeigt.

In den einleitenden <button>-Tags der OK-Buttons ist je ein Event-Handler onclick= notiert. Als Wert wird jeweils ein Funktionsaufruf zugewiesen. Dadurch wird erreicht, dass beim Anklicken des einen Buttons die Funktion add_female_name() und beim Anklicken des anderen die Funktion add_male_name() aufgerufen wird. Erstere besorgt das Verarbeiten von eingegebenen weiblichen Vornamen und Letztere das von männlichen Vornamen.

Die beiden Funktionen stehen im Kopfbereich des HTML-Dokuments innerhalb eines script- Bereichs. Beide haben den gleichen Aufbau und unterscheiden sich im Code nur durch Details.

Zunächst wird der vor dem Button-Klick eingegebene Name ermittelt. Dazu wird im Fall der weiblichen Namen auf document.getElementById("female_name").value zugegriffen. Dieses Konstrukt bedarf einer genaueren Erläuterung.

In document.getElementById("female_name") ist, wie wir mittlerweile wissen, ein Objekt gespeichert, nämlich das Knotenobjekt des input-Elements, in dem der Anwender weibliche Vornamen eingeben kann. Durch einfaches Anhängen des Attributnamens value kann auf den Wert des Attributs value= zugegriffen werden. Diese Zugriffssyntax ist speziell auf HTML ausgerichtet und gilt für alle Attribute. Mehr dazu in Abschnitt 7.4.3.

In unserem Beispiel wird der eingegebene Formularfeldwert in der Variablen name gespeichert. Anschließend wird das Formularfeld geleert, denn der Anwender soll ja weitere Namen eingeben können. Dazu wird dem value-Attribut des entsprechenden Eingabefelds ein Leerstring "" zugewiesen. Der Browser entfernt in diesem Moment der Script- Ausführung alle eingegebenen Zeichen im entsprechenden Feld.

Dem Script ist nun der eingegebene Name bekannt. Als Nächstes kann es den Namen in die Aufzählungsliste rechts einfügen. Dazu werden die entsprechenden DOM-Methoden verwendet. Zunächst wird mit document.createElement("li") ein neues Element mit Elementnamen li erzeugt. Das erzeugte Objekt wird im Beispiel in einer Objektinstanzvariablen namens li_elem gespeichert.

Die Methode createElement() ist wie beispielsweise getElementById() eine Methode des Dokumentobjekts im DOM. Und ebenso, wie in getElementById() ein Objekt gespeichert wird, so ist dies auch bei createElement() der Fall. Die Methode tut nichts weiter, als ein leeres Knotenobjekt des Typs »Element« mit einem bestimmten Elementnamen zu erzeugen. Das neue Objekt befindet sich zu diesem Zeitpunkt noch nicht innerhalb der Dokumentstruktur, sondern »freischwebend« im Datenspeicher.

Nach dem gleichen Schema, wie das li-Element erzeugt wurde, entsteht als Nächstes ein Textknotenobjekt. Ein solches Objekt kann eine Zeichenkette (genauer: CDATA) speichern, jedoch kein HTML-Markup enthalten. Zum Erzeugen von Textknoten wird die Methode createTextNode() verwendet. Die Methode bekommt als Parameter den Text übergeben, der in dem Textknotenobjekt gespeichert werden soll. In unserem Beispiel übergeben wir die Variable name, in der ja der im Namensfeld eingegebene Wert gespeichert ist. In der Objektinstanzvariablen li_text ist also anschließend der eingegebene Vorname gespeichert.

Nachdem die Knotenobjekte für das li-Element und seinen Textinhalt erzeugt wurden, kann es daran gehen, die Objekte zusammenzubauen und in die Dokumentstruktur an Zugriff auf der gewünschten Stelle einzuhängen. Alles das ist mithilfe der Objektmethode append- Child() möglich. Mit der Anweisung li_elem.appendChild(li_text) wird der erzeugte Textknoten als Kindelement an das erzeugte li-Element angehängt. Damit ist in li_elem eine Markup-Struktur wie <li>Vorname</li> realisiert, die aber immer noch nicht ins Dokument eingebunden ist. Letzteres geschieht erst mit der folgenden Anweisung:

document.getElementById("female_names").appendChild(li_elem);

Mit Ausführen dieser Anweisung wird der eingegebene Name als neuer Aufzählungspunkt in der Liste rechts sichtbar.

Die appendChild()-Methode lässt sich also auf alle Knotenobjekte anwenden, die Kindknoten haben können, unabhängig davon, ob sich das Knotenobjekt in der Dokumentstruktur befindet oder mit document.create...() als neues, leeres Objekt erzeugt wurde. Die Notationsform lautet immer Objekt.appendChild(Kindobjekt).

4.3 Zugriff auf Attribute und Werte

Um auf Werte von HTML-Attributen zuzugreifen, bietet das DOM eine vereinfachte Syntax an. Es genügt, das zugehörige Element über eine der drei Basismethoden genau zu bestimmen und dann den Attributnamen wie eine Objekteigenschaft anzuhängen.

Angenommen, im HTML-Quelltext kommt folgende Passage vor:

<p id="summary" lang="de">In diesem Artikel wird beschrieben, wie ...</p>

Dann kann der Wert des lang-Attributs dieses Elements wie folgt ermittelt werden:

document.getElementElementById("summary").lang

Wird einem solchen Konstrukt ein Wert zugewiesen (steht es also links in einer Zuweisung), dann wird der Attributwert geändert. Steht das Konstrukt rechts in einer Zuweisung, wird der Attributwert in der links stehenden Variablen gespeichert.

Nachfolgende Anweisung speichert die Sprache des p-Elements summary in einer Variablen

namens summary_language:
summary_language =
document.getElementElementById("summary").lang;

Angenommen, im HTML-Quelltext steht:

<table id="bundesliga" border="1"> ... </table>

In diesem Fall können Sie ganz einfach den Tabellenrahmen verschwinden lassen:

document.getElementElementById("bundesliga").border = "0";

Oder angenommen, im Quelltext steht:

<a id="mylink" href="http://localhost/">Dummy-Link</a>

In diesem Fall können Sie das Linkziel so ändern:

document.getElementElementById("mylink").href = "http://www.example.org/";

Ein paar Ausnahmen sind jedoch zu beachten, da einige Attribute in JavaScript nicht mit ihrem normalen HTML-Attributnamen notiert werden dürfen. Die nachfolgende Tabelle listet Attribute mit unterschiedlichen Schreibweisen auf.

Bilder


Ein typisches Beispiel zum Ändern von Attributwerten, das mächtige Möglichkeiten eröffnet, sind die so genannten Style-Switcher. Dabei kann der Anwender mittels Formular oder Link ein Stylesheet aussuchen. Dieses wird dem Dokument dann zugewiesen. Als Seitenanbieter können Sie den Anwender somit selbst auswählen lassen, welche »Skin« er wünscht. Das könnte beispielsweise so aussehen:

Listing 7.13: Style-Switcher mit JavaScript
Bilder


Das Beispieldokument enthält im body-Bereich zwei Links, die bei Anklicken beide die Funktion change_style() aufrufen. Diese ist im Dateikopf in einem script-Bereich notiert. Übergeben wird ihr beim Aufruf eine Zahl. Die Funktion wertet die Zahl, die sie als Parameter n erwartet, aus. Beträgt der Wert 1, gelangt die Ausführung in den ersten if-Zweig. Beträgt er zwei, wird der zweite if- Zweig ausgeführt. Die jeweils erste Anweisung greift auf das link-Element zu, das ebenfalls im Dateikopf notiert ist. Es hat ein id-Attribut mit dem Wert style und kann daher über document.getElementById('style') angesprochen werden. Geändert wird das href-Attribut, indem eine andere externe CSS-Datei zugewiesen wird. Moderne Browser reagieren umgehend, lesen die andere CSS-Datei aus und ändern dynamisch im angezeigten Dokument alles, was auf Grund der anderen CSSAngaben zu ändern ist.

Ferner tauscht die Funktion im Beispiel noch den Inhalt der h1-Überschrift aus, damit der Anwender sieht, welches Stylesheet aktuell ist.

Neben dieser vereinfachten Zugriffssyntax auf HTML-Attribute gibt es aber auch »echte« DOM- Methoden für den Zugriff auf Attribute.

Ein paar Beispiele:

language = document.getElementElementById("summary").getAttribute('lang');

In dieser Anweisung wird in language der Wert des lang-Attributs eines p-Elements mit dem id- Namen summary gespeichert. Die DOM-Methode getAttribute() kann an eine der drei Basismethoden zum Zugriff auf ein bestimmtes Element angehängt werden. Sie ermittelt den Wert eines Attributs. Dazu bekommt sie den gewünschten Attributnamen als Parameter übergeben.

document.getElementElementById("mylink").setAttribute("href", "http://
www.example.org/");

In dieser Anweisung wird das Verweisziel des a-Elements mit dem id-Namen mylink geändert. Die DOM-Methode setAttribute() erwartet als ersten Parameter den Namen des gewünschten Attributs und als zweiten Parameter den gewünschten Wert. Ist das Attribut im HTML-Quelltext bereits vorhanden, wird sein alter Wert durch den neuen ersetzt. Ist es noch nicht vorhanden, wird es neu angelegt und mit dem neuen Wert belegt.

Analog zu den beiden DOM-Methoden document.createElement() und document.create- TextNode(), die wir bereits kennen gelernt haben, gibt es auch eine Methode document. createAttribute().

Dazu ein Beispiel:

<blockquote id="kuehe">In der Nacht sind alle Kühe schwarz, auch die blonden</
blockquote>
<script type="text/javascript">
var author = document.createAttribute("cite");
author.nodeValue = "Karl Kraus";
document.getElementById("Kuehe").setAttributeNode(author);
</script>

Das Beispiel fügt mittels Script einem blockquote-Element ein Attribut cite= hinzu. Dazu wird zunächst mit document.createAttribute() ein neues Knotenobjekt des Knotenyps »Attribut« erzeugt. Als Parameter wird der Name des Attributs übergeben – im Beispiel cite. Das neu erzeugte Objekt wird in einer Objektinstanzvariablen gespeichert, wie im Beispiel author. Zu diesem Zeitpunkt hat das Attribut noch keinen Wert. Dieser wird ihm mithilfe der Objekteigenschaft nodeValue zugewiesen. Im Beispiel existiert nach Ausführung der Anweisung author.nodeValue = "Karl Kraus" ein Markup-Konstrukt cite="Karl Kraus". Dieses ist jedoch noch keinem bestimmten Element zugewiesen, d.h., es muss noch in die Dokumentstruktur eingefügt werden. Dazu dient die letzte Anweisung im Beispielscript. Mit document.getElementById("Kuehe") wird das gewünschte Element angesprochen. Die Methode setAttributeNode() fügt ein Knotenobjekt des Knotentyps »Attribut« in ein Knotenobjekt des Knotentyps »Element« ein. Als Parameter wird der Methode die Variable übergeben, in der das Attributobjekt gespeichert ist.

4.4 Zugriff auf CSS-Eigenschaften

Der Zugriff auf CSS-Eigenschaften von HTML-Elementen ist ähnlich einfach wie derjenige auf Attributwerte. Voraussetzung ist auch hierbei wieder, mithilfe einer der drei Basismethoden document.getElementById(), document.getElementsByName() oder document.get- ElementsByTagName() ein Element zu bestimmen, dessen style-Eigenschaften geändert werden sollen.

Ein Beispiel:

Listing 7.14: Dokument mit scriptgesteuertem Fading (langsamem Einblenden des Inhalts)
Bilder


Der body-Bereich des Beispieldokuments besteht aus einer h1-Überschrift und einem Textabsatz. Im Dateikopf ist ein style-Bereich notiert, in dem das body-Element mit CSS eine Hintergrundfarbe und eine Textfarbe zugewiesen bekommt. Beide Farben sind gleich (dunkles Grau). Wegen der Vererbung von CSS erhalten alle Textelemente innerhalb des body-Bereichs diese Farben. Zunächst ist daher gar kein Text zu sehen, da dieser Grau auf Grau erscheint.

Bilder

Abbildung 7.15: Dokument mit script-gesteuertem Fading (langsamem Einblenden des Inhalts)

Im einleitenden <body>-Tag wird jedoch über den Event-Handler onload= zeitverzögert um 1000 Millisekunden (eine Sekunde) die Funktion fade() aufgerufen, die in einem script- Bereich im Dateikopf steht. In dem script-Bereich werden gleich beim Einlesen zwei Variablen bg_value (RGB-Einheitswert für Hintergrundfarbe) und fg_value (RGB-Einheitswert für Textfarbe) deklariert und mit dem gleichen Wert initialisiert, der auch in den CSS-Formatdefinitionen benutzt wurde.

Die Funktion fade() ändert die CSS-Eigenschaftswerte. Dazu greift sie über die Basismethode document.getElementById() auf das body-Element zu, das den id-Namen body erhalten hat. Für den Zugriff auf CSS-Eigenschaften eines so ermittelten Elements wird einfach style wie eine Objekteigenschaft angehängt. Dahinter folgt, abermals durch den Punktoperator getrennt, der Name der CSS-Eigenschaft.

Bei den Namen von CSS-Eigenschaften in JavaScript ist jedoch zu beachten, dass dabei nicht der übliche Bindestrich benutzt werden darf. Stattdessen wird der Bindestrich weggelassen und das nachfolgende Teilwort beginnt mit einem Großbuchstaben. Aus der CSSEigenschaft background- olor wird daher in JavaScript backgroundColor. Nach dem gleichen Schema würde beispielsweise aus margin-left in JavaScript marginLeft und bordertop- width würde zu borderTopWidth.

Wertzuweisungen an CSS-Eigenschaften werden in JavaScript als Zeichenkette notiert, also z.B. marginLeft = "20px". In unserem Fading-Beispiel werden jeweils Farbwerte in der Notationsform rgb(R,G,B) zugewiesen. Die als Wert zugewiesene Zeichenkette wird dabei aus den aktuellen Werten der Variablen bg_value bzw. fg_value zusammengesetzt. Anschließend wird bg_value um 1 erhöht und fg_value um 1 verringert. Schließlich ruft sich die Funktion fade() mit einer Zeitverzögerung von 30 Millisekunden selbst wieder auf.
Nach insgesamt 128 Durchläufen, die 128 × 30, also 3840 Millisekunden Nettozeit brauchen (3,8 Sekunden), ist die Textfarbe Schwarz, weil fg_value bei 0 angelangt ist, und die Hintergrundfarbe ist Weiß, weil bg_value 255 erreicht hat. Damit sich die Funktion fade() nicht endlos weiter aufruft und die beiden Variablen auf unzulässige Werte ändert, sorgt eine if-Abfrage am Anfang der Funktion dafür, dass die Funktion sofort verlassen wird, wenn die Grenzwerte erreicht sind.

Für die Praxis ist das vorgestellte Fading-Beispiel jedoch nur bedingt zu empfehlen, denn bei deaktiviertem JavaScript bleibt die Seite Grau auf Grau und der Anwender bekommt nichts vom Text zu sehen. Insofern kann das Beispiel auch als schlechtes Beispiel dienen und das Bewusstsein dafür schärfen, dass manches, was mit JavaScript schick aussieht, ohne JavaScript zu Anzeigeproblemen führt. Natürlich sind auch kreative Lösungen gefragt. In unserem Beispiel wäre es etwa möglich, im style-Bereich die Farben Schwarz auf Weiß zu definieren und stattdessen im script-Bereich außerhalb der Funktion, also gleich beim Einlesen, die Farben Grau auf Grau zuzuweisen. Auf diese Weise würden Browser, die das Script nicht interpretieren, die Seite so anzeigen wie nach dem Fading der Fall.


 

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 MaoMao
  • 09.01.2013 - 16:57

Gute Tutorial leicht erklärt.

Portrait von roger1
  • 05.11.2009 - 16:41

Hallo,

ich bin begeistert. Ich habe bisher nichts gefungen, wo so gut erklärt wurde. 5*
Sehr empfehlenswert.
Grüße Roger

x
×
×