Objekte und JavaScript - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 152

<h1>Erzeugen von einem Objekt</h1>
<img alt="Aussichten" />
<script type="text/javascript">
b1 = new Image();
b1.src = "images/b1.jpg";
b2 = new Image();
b2.src = "images/b2.jpg";
document.images[0].src = b1.src;
setTimeout("document.images[0].src=b2.src", "5000");
</script>
</body>
</html>
Das Beispiel zeigt eine einfache Webseite, in der mit der Anweisung <img alt="Aussichten" />
rein auf Basis von HTML ein Bildelement angelegt wird (über einen <img> -Tag). Allerdings
sollte Ihnen aufallen, dass dem Tag kein konkretes Bild zugewiesen wurde. Mit anderen
Worten - der Eigenschat src ist kein Wert zugewiesen und zum Zeitpunkt der Verarbei-
tung des HTML-Tags durch den Browser steht noch kein konkretes Bild zur Verfügung.
HInWEIS: Im Hintergrund erzeugt der Browser aus den Elementen der Webseite
automatisch Objekte. Das werden wir im Abschnitt zum DOM-Konzept sehen.
Mit der Anweisung b1 = new Image(); wird ein Bildobjekt mit JavaScript erzeugt und in
der folgenden Zeile dann der Eigenschat src ein Wert zugewiesen. Dies ist der URL einer
Bilddatei. Analog erzeugen wir ein zweites Bild samt zugeordnetem URL. Die Bildobjekte
werden aber bis dahin noch nicht in der Webseite angezeigt.
In den folgenden Zeilen greifen wir - wie schon früher - explizit auf Techniken des DOM-
Konzepts vor. Zuerst wird der URL des einen Bildobjekts der src -Eigenschat des Elements
zugewiesen, das wir indirekt über das DOM-Konzept mit dem <img> -Tag erzeugt haben. Der
Zugrif erfolgt über Objektfelder. Damit wird das Bild in der Webseite angezeigt.
Danach tauschen wir zeitgesteuert (nach fünf Sekunden) den URL der src -Eigenschat des
HTML- <img> -Tags durch einen neuen Wert aus. Und zwar durch den Wert, der über die
Eigenschat src von dem erzeugten Bildobjekt b2 repräsentiert wird ( setTimeout("document.
images[0].src=b2.src", "5000"); ). Damit wird fünf Sekunden nach dem Laden der Web-
seite ein neues Bild in der Webseite angezeigt.
Bild 7.1■
Das Bildobjekt wurde per new Image()
erzeugt.