### JavaScript Practice -- Image Viewer  2019.02.27 。 Ric Huang --- ### Step 1: Create an HTML layout * Download sample HTML, CSS, and images from \[[here](https://github.com/ric2k1/ric2k1.github.io/blob/master/W2_0227/practice/img_viewer_begin.tgz)] * Please use the class names and IDs as defined in styles.css so that the outlook can be the same as the reference. --- ### Step 2: Write the JavsScript file 1. Create an array variable that stores the URLs of the images (to show) 2. Define some object variables that refer to the HTML ekements participating in the image viewing --- ### Step 3: Create the interactions! 1. 先列出所有的互動 2. 針對每一個互動，先想好： * 哪一個 element 觸發？(如：某個 \<div> or \<img>) * 什麼事件觸發？(如：onclick) * 觸發什麼樣的行為？(如：抽換圖片) * 一些細節的設計 (如：style 的改變，loading 時的貼心設計) ```js <div class="image-viewer__button" onclick="previousImage()"> ``` --- ### Step 4: Detail the JS functions **Things to consider:** * 寫程式的 Lesson 1: No duplicated codes * Create functions to share! * 畫面內容有什麼修改？ * element.src = '...'; * element.href = '...'; * element.innerHTML = '...'; * 呈現樣貌有什麼修改？ * element.style.property = '...'; --- ### Step 5: 一些貼心的設計 **例如：** * 如果需要時間載入，背景是否有個圖以免一片空白 * Push some code before image loading * 「計數」到達邊界時，讓按鈕的樣貌行為改變 * 如何針對同樣的觸發事件有不同的呈現樣貌？ * element.classList.add(someClass) * element.classList.remove(someClass) --- ## 寫好了嗎？