Wir haben nun gelernt, wie JavaScript Inhalte durch das Verändern von CSS verschieben kann. Darüber hinaus können wir auch auf Aktionen des Nutzers reagieren. Dies ist durch das Überwachen von Events möglich.
Aber was ist, wenn die Reihenfolge der Fotos in unserer Slideshow
geändert werden soll? ... Das könntest du durch das Editieren der
<img>-Tags im HTML machen. Gar keine schlechte Idee!
Wir könnten aber auch JavaScript benutzen, um die Fotos neu zu positionieren. Dazu können wir den Inhalt des Dokumentes modifizieren (etwa durch hinzufügen und löschen), so ähnlich wie wir es mit dem CSS auch getan haben.
Doch Vorsicht: JavaScript zu benutzen, nur um clever zu sein, ist in "realen" Webseiten keine gute Idee. Es kann jedoch ein guter Weg sein, um neue Sachen zu lernen. Außerdem gibt es sehr wohl Situationen, in welchen es Sinn macht, den Inhalt der Seite mittels JavaScript zu verändern.Lernen wie man den Inhalt einer Webseite mittels JavaScript verändern kann. Nutze dazu Attribute und Methoden des DOMs.
Öffne deine Slideshow in Chrome und öffne die Konsole.
Hinweis: Da wir die Datei slideshow.js geladen haben,
existiert eine Referenz zum "Film" über die Variable filmroll. Schreibe
in die Konsole folgendes:
filmroll.innerHTML
Kann die Eigenschaft innerHTML der Variable filmroll
nur gelesen werden? Finde es heraus, in dem du folgendes ausprobierst:
filmroll.innerHTML = "Vergiss nicht: Strings brauchen Anführungszeichen :)"
Natürlich kannst du auch Zahlen benutzen oder Formeln schreiben... falls du willst:
filmroll.innerHTML = 4 + 3 * 111 + 1000
Versuch doch mal einen String (Zeichenkette) mit HTML:
filmroll.innerHTML = "<h1>Whoa!</h1> <p>Was passiert jetzt?</p>"
Wir können auch HTML zum bestehenden HTML hinzufügen! Dazu kann der Operator
+= benutzt werden:
filmroll.innerHTML += "<p>Yeah! Ich sehe Potenzial!</p>"
Versuche doch mal das:
var address = "http://tif.ca/hello.jpg"; var html = "<img src=" + address + ">"; filmroll.innerHTML = html;
Einer der leichtesten Wege um Inhalt zu einer Webseite hinzuzufügen,
ist die Nutzung der Eigenschaft innerHTML. Diese existiert auf
jedem DOM-Element. Da HTML nur Text ist, kannst du mittels innerHTML
jeden denkbaren Text setzen. Der Browser wird diesen dann rendern.
Wir können innerHTML sowohl zum Lesen des bestehenden Inhalts
als auch zum Verändern des Inhalts benutzen. Dabei spielt es keine Rolle,
ob du den Inhalt löschst, ersetzt oder erweiterst. Alles ist möglich!
Da wir bereits gelernt haben, wie man Strings "addiert", können
wir auch HTML erstellen und dieses dann durch setzen von innerHTML
ausgeben.
Dies ist zwar nicht die einzige Möglichkeit neuen Inhalt zum Dokument hinzuzufügen, heute werden wir diese jedoch ausschließlich benutzen.
Baue das HTML auf Grundlage eines Arrays mit Strings.
Erstelle in slideshow.js ein Array
mit dem Namen photos und speichere die Namen der Bilder darin:
var photos = [ "DATEINAME_DES_ERSTEN_FOTOS", "DATEINAME_DES_ZWEITEN_FOTOS", "DATEINAME_DES_DRITTEN_FOTOS" ];
Benutze die kompletten Dateinamen inkl. Dateierweiterung (.jpg, .gif or .png).
Definiere eine Variable mit dem Namen html und weise ihr einen leeren
String zu:
var html = "";
Gehe nun in die Datei index.html und lösche alle Bilder-Tags aus dem Film-<div> (das mit id="the-film-roll") heraus.
Deine index.html sollte nun so aussehen:
<!doctype html> <head> <title>I ♥ Coding</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <div class="picture-frame"> <div class="film-roll" id="the-film-roll"> </div> </div> <script src="slideshow.js"></script>
Lade die Seite in Chrome um sicherzustellen, dass alle Bilder verschwunden sind.
Als nächstes benutzen wir eine for-Schleife, um die Bilder dynamisch
hinzuzufügen. Gehe zurück in die slideshow.js und
schreibe dort eine for-Schleife, welche über das photos-Array
iteriert und jedes mal einen <img>-Tag zur html-Variable
hinzufügt:
for (var i = 0; i < photos.length; i++) {
html += "<img>";
}
Eine for-Schleife funktioniert ähnlich wie eine while-Schleife,
aber die Initialisierung, Veränderung und Überprüfung des Zählers erfolgt in einer einzelnen
Zeile – in den Klammern hinter dem Schlüsselwort for.
Im ersten Schritt, var i = 0, wird die Variable initialisiert, die als Zähler
verwendet wird. Im zweiten Schritt i < photos.length, wird dieser Zähler
überprüft. Der letzte Schritt, i++, erhöht den Zähler um eins.
Nachdem wir nun wissen, wie eine for-Schleife funktioniert, können wir uns dem
Array zuwenden. Erinnerst du dich daran, dass auf die im Array gespeicherten Werte durch
Nutzung des Indexes zugegriffen werden kann? Den Namen des zweiten Fotoserhälst du etwa so: photos[1]
Verändere die Schleife so, dass bei jeder Iteration der aktuelle Wert im
photos-Array als src-Attribut zum Bild hinzugefügt
wird.
for (var i = 0; i < photos.length; i++) {
html += "<img src=" + photos[i] + ">";
}
Setze nun das innerHTML des Films (filmroll) auf
html:
filmroll.innerHTML = html;
Lade die Seite in Chrome neu. Das Scrolling sollte immer noch funktionieren!
Du kannst jetzt die Fotos umsortieren: Platziere das zweite Foto an die erste Stelle.
Dazu muss lediglich die Sortierung im photos-Array angepasst werden.
Yeah! Wir haben die Namen der Bilder in einem Array gespeichert und auf
dessen Grundlage das HTML für unsere Bilder erstellt. Durch das Aktualisieren
von innerHTML wurden die Fotos letztlich im Browser dargestellt.
Da wir die Dateinamen in einem Array gespeichert haben, war es sehr einfach die Sortierung der Bilder zu ändern.
(OK... Es wäre auch im HTML sehr einfach gewesen, aber ist das nicht viel spannender gewesen?)