diff options
Diffstat (limited to 'files/zh-tw/learn/javascript/building_blocks/image_gallery/index.html')
| -rw-r--r-- | files/zh-tw/learn/javascript/building_blocks/image_gallery/index.html | 135 |
1 files changed, 135 insertions, 0 deletions
diff --git a/files/zh-tw/learn/javascript/building_blocks/image_gallery/index.html b/files/zh-tw/learn/javascript/building_blocks/image_gallery/index.html new file mode 100644 index 0000000000..32c5a1867a --- /dev/null +++ b/files/zh-tw/learn/javascript/building_blocks/image_gallery/index.html @@ -0,0 +1,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> |