-
Notifications
You must be signed in to change notification settings - Fork 10
/
page4_de.html
242 lines (185 loc) · 7.4 KB
/
page4_de.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<!doctype html>
<head>
<title>Kursmaterial — Seite 4</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Averia+Serif+Libre:300,400">
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
</head>
<h1>Kursmaterial: Seite 4, mehr Dynamik, bitte!</h1>
<p>
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.
</p>
<p>
Aber was ist, wenn die Reihenfolge der Fotos in unserer Slideshow
geändert werden soll? ... Das könntest du durch das Editieren der
<code><img></code>-Tags im HTML machen. Gar keine schlechte Idee!
</p>
<p>
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.
</p>
</p>
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.
</p>
<h2 class="step">Verändern des Dokumenteninhaltes mittels JavaScript</h2>
<h3 class=goal>Ziel</h3>
<p>Lernen wie man den Inhalt einer Webseite mittels JavaScript verändern kann. Nutze dazu
Attribute und Methoden des DOMs.</p>
<h3 class=inst>Anweisungen</h3>
<p>Öffne deine Slideshow in Chrome und öffne die Konsole.</p>
<p>Hinweis: Da wir die Datei <span class="filename">slideshow.js</span> geladen haben,
existiert eine Referenz zum "Film" über die Variable <code>filmroll</code>. Schreibe
in die Konsole folgendes:
</p>
<pre>
filmroll.innerHTML
</pre>
<p>
Kann die Eigenschaft <code>innerHTML</code> der Variable <code>filmroll</code>
nur gelesen werden? Finde es heraus, in dem du folgendes ausprobierst:</p>
<pre>
filmroll.innerHTML = "Vergiss nicht: Strings brauchen Anführungszeichen :)"
</pre>
<p>Natürlich kannst du auch Zahlen benutzen oder Formeln schreiben... falls du willst:</p>
<pre>
filmroll.innerHTML = 4 + 3 * 111 + 1000
</pre>
<p>Versuch doch mal einen String (Zeichenkette) mit HTML:</p>
<pre>
filmroll.innerHTML = "<h1>Whoa!</h1> <p>Was passiert jetzt?</p>"
</pre>
<p>Wir können auch HTML zum bestehenden HTML hinzufügen! Dazu kann der Operator
<code>+=</code> benutzt werden:</p>
<pre>
filmroll.innerHTML += "<p>Yeah! Ich sehe Potenzial!</p>"
</pre>
<p>Versuche doch mal das:</p>
<pre>
var address = "http://tif.ca/hello.jpg";
var html = "<img src=" + address + ">";
filmroll.innerHTML = html;
</pre>
<h3 class="ex">Erklärung</h3>
<p>
Einer der leichtesten Wege um Inhalt zu einer Webseite hinzuzufügen,
ist die Nutzung der Eigenschaft <code>innerHTML</code>. Diese existiert auf
jedem DOM-Element. Da HTML nur Text ist, kannst du mittels <code>innerHTML</code>
jeden denkbaren Text setzen. Der Browser wird diesen dann <em>rendern</em>.
<p>
<p>
Wir können <code>innerHTML</code> 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!
</p>
<p>
Da wir bereits gelernt haben, wie man Strings "addiert", können
wir auch HTML erstellen und dieses dann durch setzen von <code>innerHTML</code>
ausgeben.
</p>
<p>
Dies ist zwar nicht die einzige Möglichkeit neuen Inhalt zum Dokument hinzuzufügen,
heute werden wir diese jedoch ausschließlich benutzen.
</p>
<h2 class="step">Erstelle das HTML des Filmes mit JavaScript</h2>
<h3 class=goal>Ziel</h3>
<p>Baue das HTML auf Grundlage eines Arrays mit Strings.</p>
<h3 class=inst>Anweisungen</h3>
<p>Erstelle in <span class="filename">slideshow.js</span> ein Array
mit dem Namen <code>photos</code> und speichere die Namen der Bilder darin:</p>
<pre>
var photos = [
"DATEINAME_DES_ERSTEN_FOTOS",
"DATEINAME_DES_ZWEITEN_FOTOS",
"DATEINAME_DES_DRITTEN_FOTOS"
];
</pre>
<p>Benutze die kompletten Dateinamen inkl. Dateierweiterung (.jpg, .gif or .png).</p>
<p>Definiere eine Variable mit dem Namen <code>html</code> und weise ihr einen leeren
String zu:</p>
<pre>
var html = "";
</pre>
<p>
Gehe nun in die Datei <span class="filename">index.html</span> und lösche alle Bilder-Tags aus dem Film-<code><div></code> (das mit <code>id="the-film-roll"</code>) heraus.
Deine <span class="filename">index.html</span> sollte nun so aussehen:
</p>
<pre>
<!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>
</pre>
<p>
Lade die Seite in Chrome um sicherzustellen, dass alle Bilder verschwunden sind.
</p>
<p>
Als nächstes benutzen wir eine <code>for</code>-Schleife, um die Bilder dynamisch
hinzuzufügen. Gehe zurück in die <span class="filename">slideshow.js</span> und
schreibe dort eine <code>for</code>-Schleife, welche über das <code>photos</code>-Array
iteriert und jedes mal einen <code><img></code>-Tag zur <code>html</code>-Variable
hinzufügt:
</p>
<pre>
for (var i = 0; i < photos.length; i++) {
html += "<img>";
}
</pre>
<p>
Eine <code>for</code>-Schleife funktioniert ähnlich wie eine <code>while</code>-Schleife,
aber die Initialisierung, Veränderung und Überprüfung des Zählers erfolgt in einer einzelnen
Zeile – in den Klammern hinter dem Schlüsselwort <code>for</code>.
Im ersten Schritt, <code>var i = 0</code>, wird die Variable initialisiert, die als Zähler
verwendet wird. Im zweiten Schritt <code>i < photos.length</code>, wird dieser Zähler
überprüft. Der letzte Schritt, <code>i++</code>, erhöht den Zähler um eins.
</p>
<p>
Nachdem wir nun wissen, wie eine <code>for</code>-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: <code>photos[1]</code>
</p>
<p>
Verändere die Schleife so, dass bei jeder Iteration der aktuelle Wert im
<code>photos</code>-Array als <code>src</code>-Attribut zum Bild hinzugefügt
wird.
</p>
<pre>
for (var i = 0; i < photos.length; i++) {
html += "<img <strong>src=" + photos[i] + "</strong>>";
}
</pre>
<p>Setze nun das <code>innerHTML</code> des <code>Films</code> (filmroll) auf
<code>html</code>:</p>
<pre>
filmroll.innerHTML = html;
</pre>
<p> Lade die Seite in Chrome neu. Das Scrolling sollte immer noch funktionieren!</p>
<p>
Du kannst jetzt die Fotos umsortieren: Platziere das zweite Foto an die erste Stelle.
Dazu muss lediglich die Sortierung im <code>photos</code>-Array angepasst werden.
</p>
<h3 class=ex>Erklärung</h3>
<p>
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 <code>innerHTML</code> wurden die Fotos letztlich im Browser dargestellt.
</p>
<p>
Da wir die Dateinamen in einem Array gespeichert haben, war es sehr einfach die
Sortierung der Bilder zu ändern.
</p>
<p>(OK... Es wäre auch im HTML sehr einfach gewesen, aber ist das nicht viel spannender gewesen?)<p>