影像圖庫

現在我們已經看過了基本的 JavaScript 組建,我們將讓你做一個測試,從建立一個在很多網站上常見的事物 — JavaScript 基礎的影像圖庫,來測試你對迴圈、函數、條件式及事件的知識。

先修課程: 在進行這個評量前,你應已閱讀、練習了本模組中所有的文章。
目的: 測試對JavaScript中迴圈、函數、條件式及事件的瞭解程度。

從這裡開始

要進行這個評量,你要先下載 grab the ZIP 檔案,解壓縮在你電腦中的某個檔案夾作為範例。

備註: 你也可以在某些網站進行評鑑,如 JSBinGlitch。你可以把這些 HTML、CSS 和 JavaScript 貼到這些線上編輯器中。如果你用了一個沒法把 JavaScript/CSS 分別放在不同面板的線上編輯器,你可以放心的把這些<script>/<style>元件改成 inline 貼進 HTML 網頁裡。

專案簡報

你手上已有我們提供的一些 HTML、CSS 和圖片資料,以及幾行 JavaScript 程式碼;你要寫一些必要的 JavaScript 讓它變成可運作的程式。這些 HTML 的 body 看起來如下:

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>

完成後看起來像下圖:

範例 CSS 檔案中最有趣的部分是:

  • full-img <div> 裡有的三個組成元素使用絕對位置 — <img> 展示全尺寸圖片,在它正上方有個與它尺寸相同的空 <div> (用來放置用半透明的背景色彩讓圖片產生變暗效果的層),然後 <button> 用來控制變暗效果。
  • 設定 thumb-bar <div> (一般叫做「縮圖」的圖片)裡的圖片讓它縮小成原來的 20%,之後讓它浮(float)在左邊讓縮圖能一個個相鄰的排成一列。

在你的 JavaScript 裡需要:

  • 讓所有圖片迴圈(Loop) through all the images, 在 thumb-bar <div> 裡的每個 <img> 塞進一個 <img> ,讓圖片內嵌在頁面上。
  • thumb-bar <div> 裡的每個 <img> 添加一個 onclick 處理器使這個圖片被點擊時會放大展示在 displayed-img <img> 裡。
  • <button> 添加一個 onclick 處理器,當點擊時,全尺寸圖片產生暗化效果,再次點擊時移除暗化效果。

為了讓你更清楚,你可以看看這個 完成的範例 (但別偷看原始碼!)

一步步完成

接下來幾節描述你該怎麼做。

讓所有圖片迴圈

我們已提供了幾行程式碼:將thumb-bar<div>儲存在 thumbBar這個變數裡、建立一個新的 <img> 元件、將它的 src 屬性設定在一個值為 xxx 的佔位符中,以及在 thumbBar 裡增加新 <img>

你要做的是:

  1. 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.
  2. In each loop iteration, replace the xxx placeholder value with a string that will equal the path to the image in each case. We are setting the value of the src 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 pic1.jpg, pic2.jpg, etc.

在每個縮圖上添加 onclick 事件處理器

In each loop iteration, you need to add an onclick handler to the current newImage — this should:

  1. 在每個 <img> 中把"src"作為運行getAttribute() 函數的參數,取得現在這張圖片的 src 屬性的值。但是要怎麼抓到現在這張圖片?如果用newImage 是做不到的,當在添加事件處理器前,迴圈已經先完成了;所以你每次都獲得前一個 <img>的回傳的 src 值。解法是,記住,在每個事件中,事件處理器的目標是 <img> ,如何獲得事件物件的資訊呢?
  2. Run a function, passing it the returned src value as a parameter. You can call this function whatever you like.
  3. This event handler function should set the src attribute value of the displayed-img <img> to the src value passed in as a parameter. We've already provided you with a line that stores a reference to the relevant <img> in a variable called displayedImg. Note that we want a defined named function here.

寫一個讓暗化/亮化按鈕可以運作的處理器

That just leaves our darken/lighten <button> — we've already provided a line that stores a reference to the <button> in a variable called btn. You need to add an onclick handler that:

  1. Checks the current class name set on the <button> — you can again achieve this by using getAttribute().
  2. If the class name is "dark", changes the <button> class to "light" (using setAttribute() (en-US)), its text content to "Lighten", and the background-color of the overlay <div> to "rgba(0,0,0,0.5)".
  3. If the class name not "dark", changes the <button> class to "dark", its text content back to "Darken", and the background-color of the overlay <div> to "rgba(0,0,0,0)".

The following lines provide a basis for achieving the changes stipulated in points 2 and 3 above.

js
btn.setAttribute("class", xxx);
btn.textContent = xxx;
overlay.style.backgroundColor = xxx;

提醒與提示

  • 你完全不需要去編輯任何的 HTML 或 CSS。

評量

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 Learning Area Discourse thread, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!