-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathpage4.html
212 lines (154 loc) · 6.42 KB
/
page4.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
<!doctype html>
<head>
<title>Curriculum — page 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>Curriculum: page 4, more dynamic, please!</h1>
<p>We’ve seen how we can use JavaScript to move content around on the
page by changing the CSS. We can even react to the user by listening
to events.</p>
<p>But what if you want to change the order of your photos in the
slide show? You could do it by editing the <code><img></code> tags
in the HTML, which is not a bad idea.</p>
<p>We could also be very clever, and use JavaScript to rearrange
the images. We can edit (including adding and deleting) the content
of the document, just like we can change the CSS.</p>
</p>Using JavaScript just to be clever is not a good idea for “real”
web pages. But being clever <em>is</em> a fun way to learn. Plus,
there are situations where editing the content using JavaScript is a
good idea.</p>
<h2 class="step">Edit content of the document using JavaScript</h2>
<h3 class=goal>Goal</h3>
<p>See how to edit the content of the document with JavaScript DOM
properties and methods.</p>
<h3 class=inst>Instructions</h3>
<p>Visit your slide show in Chrome, and open the console.</p>
<p>Remember, since we have our <span class="filename">slideshow.js</span> running, we
have a reference to the “film roll” in the variable called
<code>filmroll</code>. In the console, type:</p>
<pre>
filmroll.innerHTML
</pre>
<p>Is the <code>innerHTML</code> property of <code>filmroll</code> a
<em>read-only</em> value? Find out by trying to set it to some other
value:</p>
<pre>
filmroll.innerHTML = "Remember, strings need quotes."
</pre>
<p>You can also use numbers, and do math, if you wanted:</p>
<pre>
filmroll.innerHTML = 4 + 3 * 111 + 1000
</pre>
<p>Try it with a string of HTML:</p>
<pre>
filmroll.innerHTML = "<h1>Whoa!</h1> <p>Check it out.</p>"
</pre>
<p>We can add HTML to the HTML that is already there using the
<code>+=</code> operation:</p>
<pre>
filmroll.innerHTML += "<p>Yeah! Lots of potential.</p>"
</pre>
<p>Try this:</p>
<pre>
var address = "http://tif.ca/hello.jpg";
var html = "<img src=" + address + ">";
filmroll.innerHTML = html;
</pre>
<h3 class=ex>Explanation</h3>
<p>One of the easiest ways to create content in a web page using
JavaScript is to set the <code>innerHTML</code> of an element to
something new. Since HTML is just text, you can set the
<code>innerHTML</code> to any text and it is <em>rendered</em> by the
browser as HTML.<p>
<p>We can read the <code>innerHTML</code> of an element as well as
write to it, which means we can add the new HTML to the existing
<code>innerHTML</code> to add, rather than replace, content.</p>
<p>Because we can “add” strings of text together, we can also create
HTML, and then use it to set <code>innerHTML</code>.</p>
<p>This technique is not the only way to add content to the document,
but for today, we will only use this one.</p>
<h2 class="step">Create the film roll HTML using JavaScript</h2>
<h3 class=goal>Goal</h3>
<p>To see how to build an HTML string from an array of values.</p>
<h3 class=inst>Instructions</h3>
<p>In <span class="filename">slideshow.js</span>, create an array
called <code>photos</code>, and store the file names of your images:</p>
<pre>
var photos = [
"FILE_NAME_OF_THE_FIRST_PHOTO",
"FILE_NAME_OF_THE_SECOND_PHOTO",
"FILE_NAME_OF_THE_THIRD_PHOTO"
];
</pre>
<p>Remember to use the complete file name including the file
extension (.jpg, .gif or .png).</p>
<p>Define a variable called <code>html</code> that is just an empty string:</p>
<pre>
var html = "";
</pre>
<p>In your <span class="filename">index.html</span>, delete all the image tags that are
inside of your “film roll” <code><div></code> (the one with
<code>id="the-film-roll"</code>). Your <span class="filename">index.html</span>
will looks like this afterwards:</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>Refresh the page in Chrome to prove to yourself that the images are
really all gone.</p>
<p>Next, we'll use a <code>for</code> loop to add the images dynamically.
Back in <span class="filename">slideshow.js</span>, write a <code>for</code>
loop that iterates over the items in the <code>photos</code> array, and
each time adds another <code><img></code> tag to the <code>html</code>
string:</p>
<pre>
for (var i = 0; i < photos.length; i++) {
html += "<img>";
}
</pre>
<p>A <code>for</code> loop is similar to a <code>while</code> loop, but
initializing the loop state, checking it, and updating it, are all grouped
together in the brackets after the keyword <code>for</code>.
The first part, <code>var i = 0</code>, initializes the variable used as a
counter. The second part, <code>i < photos.length</code>, checks if the
loop should be terminated. The last part, <code>i++</code>, increases the counter
by one to make the loop continue.</p>
<p>Now that you know how a <code>for</code> loop works, recall that the value
stored at index <code>i</code> of the array <code>photos</code> is accessed like
this: <code>photos[i]</code>.</p>
<p>Update the loop so that each time, the value stored in
<code>photos[i]</code> is added as the <code>src</code> attribute:</p>
<pre>
for (var i = 0; i < photos.length; i++) {
html += "<img <strong>src=" + photos[i] + "</strong>>";
}
</pre>
<p>Now set the <code>innerHTML</code> of <code>filmroll</code> to
<code>html</code>:</p>
<pre>
filmroll.innerHTML = html;
</pre>
<p>Refresh the page in Chrome. Double check that scrolling still
works.</p>
<p>Now rearrange your photos: put the second photo first. Do this by
changing their order in the <code>photos</code> array.</p>
<h3 class=ex>Explanation</h3>
<p>Pretty cool! We stored all the names of our images in an array, and
then used the array to create HTML. By updating the
<code>innerHTML</code> with the HTML we created, we added the photos
to the page.</p>
<p>Since we stored the file names in an array, we could easily change
the order of the photos by changing the order of the array.</p>
<p>(It would also be easy to just edit the HTML, but this is so much
more clever, right?)<p>