Anfängerkurs "Meine Seite versteht mich nicht?" Lektion 3 von Antje Hofmann, 23.06.2003 23:18

Anfängerkurs "Meine Seite versteht mich nicht?" Lektion 3

Antje Hofmann 23.06.2003 23:18

javascript

Hallo Memphis

herzlichen Glückwunsch. Du bist der Gewinner der Lektion 3 des Anfängerkurses "Meine Seite versteht mich nicht?".

Dieser Kurs hilft dir Schritt für Schritt beim Lösen deines Problems.

Zur Vorbereitung für diese Lektion gehe bitte zu einem Schrank mit Schubkästen und sieh ihn dir ganz genau an. Erinnere dich auch daran, welche Eigenheiten Frauen haben, du wirst dieses Wissen benötigen.

Ich hoffe, du kennst einen einarmigen Banditen. Ein solcher wird dir dabei helfen, die schwierigen Schleifen zu verstehen.

Was du kennst keinen? Glückwunsch, du bist bis heute den Verlockungen der Spielindustrie entkommen. Schau hier http://www.atomic-eggs.com/selfspezial/advent/2001/6/bandit6.html nach, wie so ein Ding aussieht und funktioniert. Aber nicht solange bleiben. Du weißt doch, du hast keine Zeit.

Na wieder zurück?

Dann wollen wir mal schauen, was du dir gemerkt hast.

Beim einarmigen Banditen ändert sich die Ansicht der Felder. Im Beispiel sind es Buchstaben und Zahlen. Bei einem realen Automaten sind es viele bunte Bildchen.

Was hat der Automat mit deinem Problem gemeinsam?

Richtig, viele viele Bildchen die angezeigt werden sollen. Das hast du fein erkannt.

Vielleicht hast du dir sogar schon die Frage gestellt, wie die bunten Bildchen in den Automaten kommen?

Bravo, bravo deine Antwort, sie werden gespeichert ist absolut richtig.

Jetzt müssen wir nur noch rauskriegen, wie man das mit JavaScript macht. JavaScript ist da sehr sehr eigenwillig. Das liegt daran, dass es eigentlich "Frau JavaScript" heißt.

Frau JavaScript möchte, dass alle bunten Bildchen sehr sehr ordentlich abgelegt werden. Sie liebt es besonders, wenn diese in dem Schrank mit dem Namen Array abgelegt sind. In diesem Schrank sind mehrere Schubkästen und in jedem Schubkasten ist genau ein einziges Bild.

Frau JavaScript möchte natürlich, dass der Schrank einen Namen bekommt und das du ihn selber baust. Wir nennen ihn am besten "vieleBunteBildchen". Diesen Schrank baust du, in dem du folgende Zeile schreibst:

vieleBunteBildchen = new Array(143);

Fällt dir was auf? Wir haben dem Schrank "vieleBunteBildchen" gleich gesagt, wie viele Schubkästen er hat.

Jetzt packen wir in jedes Fach ein Bild.

Das geht so:

vieleBunteBildchen[0] = "HundHugo.gif"; vieleBunteBildchen[1] = "KatzeMiau.jpg"; ... vieleBunteBildchen[142] = "KuhElsa.gif";

Hast du alle Schubladen gefüllt, ist der erste Teil der Aufgabe geschafft. Du kannst aufatmen und wir machen kurz eine kleine Pause, bevor wir uns dem schweren Teil zuwenden.

Was sehe ich denn da? Du hast tatsächlich noch diese Zeile eingefügt:

vieleBunteBildchen[143] = "simpleton.gif";

Du hast dich sicher verzählt. Du hast doch nur 143 Bildchen. Da die erste Schublade aber die Nummer 0 hat, musst du natürlich bei 142 aufhören. Streiche ganz schnell dieses überflüssige Bildchen.

Jetzt aber zum schweren Teil der Lektion. Ich hoffe, du hast die Pause für eine Erholung genutzt.

Was macht der Automat bevor er zum Stehen kommt? Korrekt. Er zeigt nacheinander alle Bildchen an.

Wie funktioniert das nun beim Automaten?

Du drückst den Startknopf und er zeigt das erste Bild. Dann rückt er eins weiter und zeigt das zweite usw. Bis du den Stop-Knopf drückst. Dann bleibt er stehen. Drückst du den Weiter-Knopf geht es wieder weiter.

Auch Frau JavaScript kann das. Als praktische Frau weiß sie natürlich, wie man Schleifen bindet. Sehr gern hat sie die for-Schleifen. Hier ist der Start-Knopf, der Stop-Knopf und der Weiter-Knopf schon eingebaut.

Wenn du schreibst:

for (var i=0;i<143;i++)

sagt du Frau JavaScript folgendes.

Start-Knopf: i=0 (beginne mit 0) Stop-Knopf: i<143 (höre auf, wenn i 143 ist) Weiter-Knopf: i++ (addiere zu i die Zahl 1)

Wundert dich das var? Das dient dazu, Frau JavaScript zu verklickern, dass i nur hier gültig ist. Du weißt doch wie Frauen sind, Ihnen muss man alles richtig erklären.

Allerdings reicht das natürlich noch nicht. Du musst Frau JavaScript mitteilen, in welchen Schrank sie kucken und dass sie das Bild aus der Schublade nehmen soll.

Den Schrank und die Schublade legst du mit

vieleBunteBildchen[i] fest.

Jetzt fragst du dich sicher verwirrt, wozu um Himmelswillen steht denn hier das i. Wir brauchen es in der Schleife.

for (var i=0;i<143;i++) { vieleBunteBildchen[i]; }

Jetzt siehst du es genau. Die Variable i nimmt nämlich in jeder Runde einen neuen Wert an. So wie beim Banditen das erste Bild, das zweite Bild usw. angezeigt wird, so hat i in der ersten Runde den Wert 0, dann 1 dann 2 usw. Und das Beste daran ist, in jeder Runde nimmt Frau JavaScript ein anderes Bild aus einer Schublade. Toll nicht.

Huch, ich höre dich stöhnen, du siehst nichts. Völlig richtig. Nun musst du natürlich noch sagen, was Frau JavaScript mit dem Bild machen soll. Beim Automaten ist das ja auch nichts anderes, der musste das auch erst lernen.

Bilder will Frau JavaScript grundsätzlich nicht anzeigen. Ganz unter uns, dass liegt daran, dass Frau JavaScript alle Bilder von sich einfach fürchterlich findet.

Allerdings hat sie ein Abkommen mit Herrn HTML geschlossen. Sie ist bereit, Tags zu erzeugen, die auch Bilder darstellen. Einfach macht sie es ihm nicht, denn mit

ist sie gar nicht einverstanden. Ehrlich gesagt, ich kann sie verstehen, warum es den Herren zu einfach machen.

Wenn schon denn schon, dann muss es richtig schwer aussehen:

Frau JavaScript hat mit Herrn HTML verabredet, dass sie mit ihn über document.write() reden kann. Es gibt auch noch andere Möglichkeiten, aber das ist die einfachste.

Die schnellste Möglichkeit ist, wenn du diese Zeile notierst:

document.writeln('<img src="',vieleBunteBildchen[i],'" border="0" width="200" height="300" alt="">');

Du schreibst erst den Anfang, dann ein Komma, dann das Bild, wieder ein Komma und dann den Rest. Du stolperst über die einfach Anführungsstriche? Keine Angst, dass ist richtig so. Frau JavaScript ist flexibel und akzeptiert diese auch als Stringbegrenzer.

Natürlich könntest du dich auch mit

document.writeln("<img src="',vieleBunteBildchen[i],"" border="0" width="200" height="300" alt="">");

quälen. Aber wozu, das Ganze ist doch eh schon schwer genug.

Deine Schleife sieht dann so richtig schön aus:

for (var i=0;i<143;i++) { document.writeln('<img src="', vieleBunteBildchen[i], '" border="0" width="200" height="300" alt="">'); }

Hm, jetzt haben wir doch glatt das Popup vergessen. Wie bringen wir dass denn noch unter? Leider hast du ja nicht gesagt was in dem Popup erscheint. Nehmen wir mal an, dass ist das gleiche Bild.

Dazu setzen wir einfach einen Hyperlink um das Bild.

document.writeln('<a href="', vieleBunteBildchen[i], '" target="vieleBunteBildchen"><img src="', vieleBunteBildchen[i], '" border="0" width="200" height="300" alt="">', '</a>');

Jetzt haben wir es ja schon bis zum neuen Browserfenster geschafft. Glückwunsch.

Nun müssen wir nur nach rauskriegen, wie das mit dem Popup geht.

Zum Glück haben kluge Leute das schon aufgeschrieben:

http://selfhtml.teamone.de/javascript/objekte/window.htm#open

schau mal rasch nach, wie es geht.

HippHippHurra, du hast es gefunden und weißt, dass die richtige Zeile:

window.open(this.href,'vieleBunteBildchen','width=220,height=320') heißen könnten.

Wobei this.href ein Geheimbefehl ist. Den kennt nicht jeder. Wird er angegeben, so holt er sich aus einem Verweis das Verweisziel. Wehe du sagst das weiter. Das ist unser kleines Geheimnis.

Ja wenn, ja wenn Frau JavaScript nicht so eigen wäre. Die ist keineswegs zufrieden damit, wenn du schreibst:

document.writeln('<a href="', vieleBunteBildchen[i], '" target="vieleBunteBildchen"', ' window.open(this.href,'vieleBunteBildchen','width=220,height=320')>', '<img src="', vieleBunteBildchen[i], '" border="0" width="200" height="300" alt="">', '</a>');

nein als typische Frau will sie ein wenig Klimbim drumherum. Du musst ihr auch sagen, dass sie gemeint ist, wenn jemand so bösartig ist und auf den Verweis klickt.

Dies geht mit onclick="" und darin notierst du deinen Befehl.

document.writeln('<a href="', vieleBunteBildchen[i], '" target="vieleBunteBildchen"', ' onclick ="window.open(this.href,'vieleBunteBildchen','width=220,height=320');">', '<img src="', vieleBunteBildchen[i], '" border="0" width="200" height="300" alt="">', '</a>');

Nicht das du glauben kannst, dass die Lady jetzt zufrieden ist. Im Gegenteil, sie wird dich anbrüllen. In diesem String tauchen einfache Anführungsstriche auf. Die Lady kann die nicht leiden und erwartet von dir, dass du diese versetckst.

Ja, ich weiß, mit launischen Damen ist schwer umzugehen. Aber glaube nur nicht, dass du schon fertig bist. Herr HTML meldet sich empört zu Wort. Er vermisst seine Streicheleinheiten von Frau JavaScript und öffnet aus Protest noch ein Fenster mit der gleichen URL.

Aber auch dazu kannst du Frau JavaScript animieren. Notiere dazu hinter den open-Befehl ein return false; und Herr HTML wird Frau JavaScript demütigst verehren.

So sieht dann deine hübsche Schleife aus:

for (var i=0;i<143;i++) { document.writeln('<a href="', vieleBunteBildchen[i], '" target="vieleBunteBildchen"', ' onclick ="window.open(this.href,'vieleBunteBildchen','width=220,height=320');return false">', '<img src="', vieleBunteBildchen[i], '" border="0" width="200" height="300" alt="">', '</a>');

}

Was du bist immer noch nicht zufrieden? Du hast keine Lust die Bilder zu speichern?

Auch das geht.

Beginnen wir mit dem Umbenennungsmarathon:

Bezeichne "HundHugo.gif" mit Bild0.gif Ändere das Bildformat von "KatzeMiau.jpg" in "KatzeMiau.gif" und bezeichne es mit Bild1.gif

Mache so weiter, bis du "KuhElsa.gif" in Bild142.gif umbenannt hast. Dann schreibe nach href=" und scr=" jeweils den Anfang des Bildnamens und ersetzte vieleBunteBildchen[i] durch i. Frau JavaScript wird ist dies egal, solange in ihren eigenen Schränken Ordnung herrscht.

Das sieht dann so aus:

for (var i=0;i<143;i++) { document.writeln('<a href="Bild', i, '" target="vieleBunteBildchen"', ' onclick ="window.open(this.href,'vieleBunteBildchen','width=220,height=320');return false">', '<img src="Bild', i, '" border="0" width="200" height="300" alt="">', '</a>');

So 45 min sind vorbei. Angesichts deiner Prüfungen verzichte ich mal auf Hausaufgabe.

Viele Grüße Antje

PS: Lektion 1: http://forum.de.selfhtml.org/archiv/2001/6/25001/#m130634

Lektion 2: http://forum.de.selfhtml.org/archiv/2001/6/25106/#m130975

Beitrag melden

– Informationen zu den Bewertungsregeln