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
|
---
title: 影像圖庫
slug: Learn/JavaScript/Building_blocks/Image_gallery
tags:
- JavaScript
- 事件
- 事件處理器
- 優先國際化
- 初學者
- 學習
- 條件式
- 編碼腳本
- 評量
- 迴圈
translation_of: Learn/JavaScript/Building_blocks/Image_gallery
---
<div>{{LearnSidebar}}</div>
<div>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div>
<p class="summary">現在我們已經看過了基本的JavaScript組建，我們將讓你做一個測試，從建立一個在很多網站上常見的事物 — JavaScript基礎的影像圖庫，來測試你對迴圈、函數、條件式及事件的知識。</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">先修課程：</th>
<td>在進行這個評量前，你應已閱讀、練習了本模組中所有的文章。</td>
</tr>
<tr>
<th scope="row">目的：</th>
<td>測試對JavaScript中迴圈、函數、條件式及事件的瞭解程度。</td>
</tr>
</tbody>
</table>
<h2 id="從這裡開始">從這裡開始</h2>
<p>要進行這個評量，你要先下載 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true">grab the ZIP</a> 檔案，解壓縮在你電腦中的某個檔案夾作為範例。</p>
<div class="note">
<p><strong>提醒：</strong>你也可以在某些網站進行評鑑，如 <a class="external external-icon" href="http://jsbin.com/">JSBin</a> 或<a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a>。你可以把這些HTML、CSS和JavaScript貼到這些線上編輯器中。如果你用了一個沒法把JavaScript/CSS分別放在不同面板的線上編輯器，你可以放心的把這些<code><script></code>/<code><style></code>元件改成inline貼進HTML網頁裡。</p>
</div>
<h2 id="專案簡報">專案簡報</h2>
<p>你手上已有我們提供的一些 HTML、CSS 和圖片資料，以及幾行 JavaScript 程式碼；你要寫一些必要的 JavaScript 讓它變成可運作的程式。這些 HTML 的 body 看起來如下：</p>
<pre class="brush: html"><h1>Image gallery example</h1>
<div class="full-img">
<img class="displayed-img" src="images/pic1.jpg">
<div class="overlay"></div>
<button class="dark">Darken</button>
</div>
<div class="thumb-bar">
</div></pre>
<p>完成後看起來像下圖：</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13787/gallery.png" style="display: block; margin: 0 auto;"></p>
<ul>
</ul>
<p>範例 CSS 檔案中最有趣的部分是：</p>
<ul>
<li>在 <code>full-img <div></code> 裡有的三個組成元素使用絕對位置 — <code><img></code> 展示全尺寸圖片，在它正上方有個與它尺寸相同的空 <code><div></code> （用來放置用半透明的背景色彩讓圖片產生變暗效果的層），然後 <code><button></code> 用來控制變暗效果。</li>
<li>設定 <code>thumb-bar <div></code> （一般叫做「縮圖」的圖片）裡的圖片讓它縮小成原來的20%，之後讓它浮（float）在左邊讓縮圖能一個個相鄰的排成一列。</li>
</ul>
<p>在你的 JavaScript 裡需要：</p>
<ul>
<li>讓所有圖片迴圈（Loop） through all the images, 在 <code>thumb-bar <div></code> 裡的每個 <code><img></code> 塞進一個 <code><img></code> ，讓圖片內嵌在頁面上。</li>
<li>在 <code>thumb-bar <div></code> 裡的每個 <code><img></code> 添加一個 <code>onclick</code> 處理器使這個圖片被點擊時會放大展示在 <code>displayed-img <img></code> 裡。</li>
<li>在 <code><button></code> 添加一個 <code>onclick</code> 處理器，當點擊時，全尺寸圖片產生暗化效果，再次點擊時移除暗化效果。</li>
</ul>
<p>為了讓你更清楚，你可以看看這個 <a href="http://mdn.github.io/learning-area/javascript/building-blocks/gallery/">完成的範例</a> （但別偷看原始碼！）</p>
<h2 id="一步步完成">一步步完成</h2>
<p>接下來幾節描述你該怎麼做。</p>
<h3 id="讓所有圖片迴圈">讓所有圖片迴圈</h3>
<p>我們已提供了幾行程式碼：將<code>thumb-bar</code>和 <code><div></code>儲存在 <code>thumbBar</code>這個變數裡、建立一個新的 <code><img></code> 元件、將它的 <code>src</code> 屬性設定在一個值為 <code>xxx</code> 的佔位符中，以及在 <code>thumbBar</code> 裡增加新 <code><img></code> 。</p>
<p>你要做的是：</p>
<ol>
<li>Put the section of code below the "Looping through images" comment inside a loop that loops through all 5 images — you just need to loop through five numbers, one representing each image.</li>
<li>In each loop iteration, replace the <code>xxx</code> placeholder value with a string that will equal the path to the image in each case. We are setting the value of the <code>src</code> attribute to this value in each case. Bear in mind that in each case, the image is inside the images directory and its name is <code>pic1.jpg</code>, <code>pic2.jpg</code>, etc.</li>
</ol>
<h3 id="在每個縮圖上添加onclick事件處理器">在每個縮圖上添加onclick事件處理器</h3>
<p>In each loop iteration, you need to add an <code>onclick</code> handler to the current <code>newImage</code> — this should:</p>
<ol>
<li>在每個 <code><img></code> 中把<code>"src"</code>作為運行<code>getAttribute()</code> 函數的參數，取得現在這張圖片的 <code>src</code> 屬性的值。但是要怎麼抓到現在這張圖片？如果用<code>newImage</code> 是做不到的，當在添加事件處理器前，迴圈已經先完成了；所以你每次都獲得前一個 <code><img></code>的回傳的 <code>src</code> 值。解法是，記住，在每個事件中，事件處理器的目標是 <code><img></code> ，如何獲得事件物件的資訊呢？</li>
<li>Run a function, passing it the returned <code>src</code> value as a parameter. You can call this function whatever you like.</li>
<li>This event handler function should set the <code>src</code> attribute value of the <code>displayed-img <img></code> to the <code>src</code> value passed in as a parameter. We've already provided you with a line that stores a reference to the relevant <code><img></code> in a variable called <code>displayedImg</code>. Note that we want a defined named function here.</li>
</ol>
<h3 id="寫一個讓暗化亮化按鈕可以運作的處理器">寫一個讓暗化/亮化按鈕可以運作的處理器</h3>
<p>That just leaves our darken/lighten <code><button></code> — we've already provided a line that stores a reference to the <code><button></code> in a variable called <code>btn</code>. You need to add an <code>onclick</code> handler that:</p>
<ol>
<li>Checks the current class name set on the <code><button></code> — you can again achieve this by using <code>getAttribute()</code>.</li>
<li>If the class name is <code>"dark"</code>, changes the <code><button></code> class to <code>"light"</code> (using <code><a href="/en-US/docs/Web/API/Element/setAttribute">setAttribute()</a></code>), its text content to "Lighten", and the {{cssxref("background-color")}} of the overlay <code><div></code> to <code>"rgba(0,0,0,0.5)"</code>.</li>
<li>If the class name not <code>"dark"</code>, changes the <code><button></code> class to <code>"dark"</code>, its text content back to "Darken", and the {{cssxref("background-color")}} of the overlay <code><div></code> to <code>"rgba(0,0,0,0)"</code>.</li>
</ol>
<p>The following lines provide a basis for achieving the changes stipulated in points 2 and 3 above.</p>
<pre class="brush: js">btn.setAttribute('class', xxx);
btn.textContent = xxx;
overlay.style.backgroundColor = xxx;</pre>
<h2 id="提醒與提示">提醒與提示</h2>
<ul>
<li>你完全不需要去編輯任何的HTML或CSS。</li>
</ul>
<h2 id="評量">評量</h2>
<p>If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>, or in the <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel on <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Try the exercise first — there is nothing to be gained by cheating!</p>
<p>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p>
|
