JavaScript-Programmierung von Kopf bis Fuß

Sie sind hier � 395

Asynchron programmieren

Jetzt müssen wir den onclick-Eigenschaften

jedes Bilds den gleichen Handler zuweisen …

Nun enthält die Seite mehr Bilder, aber wir haben auch mehr Arbeit damit. Im Moment können Sie nur das

erste Bild (die Mona Lisa) anklicken, um das scharfe Bild zu sehen. Was ist aber mit den anderen Bildern?

Wir könnten für jedes Bild eine eigene Handler-Funktion schreiben, aber das wäre nach allem, was wir wissen,

mühsam und eine Verschwendung von Ressourcen. Sehen Sie mal hier:

window.onload = init;

function init() {

var image0 = document.getElementById("zero");

image0.onclick = showImageZero;

var image1 = document.getElementById("one");

image1.onclick = showImageOne;

...

}

function showImageZero() {

var image = document.getElementById("zero");

image.src = "zero.jpg";

}

function showImageOne() {

var image = document.getElementById("one");

image.src = "one.jpg";

}

...

Wir könnten die Bildelemente einzeln

aus der Seite auslesen und ihnen einen

eigenen click-Handler zuweisen. Das

müssten wir sechsmal machen … hier

zeigen wir Ihnen nur zwei.

Für alle sechs Bilder

wird ein eigener click-

Handler gebraucht.

Die anderen vier kämen hier hin.

Hier bräuchten wir vier weitere Handler-Funktionen.

Worin liegen die Nachteile einzelner Handler für jedes

Bild? Kreuzen Sie alle korrekten Antworten an.

Handler enthalten viel

redundanten Code.

Wird der Code in einem Handler ver-

ändert, müssen wahrscheinlich alle

anderen auch angepasst werden.

Führt zu sehr viel Code. Schwierig, alle Bilder und

Handler im Auge zu behalten.

Schwer, für eine beliebige Anzahl

Bilder zu verallgemeinern.

Andere können den Code

schwerer bearbeiten.

Kopf-

nuss