Our Reviews

功能說明

  1. 標題
  2. 主要段落 :
    • 頭像
    • 姓名、職業、敘述
    • 按鈕 - 選前一位/後一位
    • 按鈕 - 隨機選一位

HTML重點

  • 各元素皆有給予自己的id或class，然後利用.getElementById()或.querySelector()的方法來渲染
  • 程式碼如下 : 
    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
    ...
    <!-- 主頁面 -->
    <main>
        <section class="container">
        
            <!-- 標題 -->
            <div class="title">
                <h2>Our Reviews</h2> <!-- 標題文字 -->
                <div class="underline"></div> <!-- 裝飾底線 -->
            </div>

            <!-- Review -->
            <article class="review">
            
                <!-- 頭像 -->
                <div class="img-container">
                    <img src="" id="person-img" alt="">
                </div>
                
                <!-- 姓名、職業、敘述 -->
                <h4 id="author"></h4>
                <p id="job"></p>
                <p id="info"></p>

                <!-- 前/後按鈕 -->
                <div class="button-container">
                    <button class="prev-btn">
                        <!-- 前一位按鈕icon -->
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="next-btn">
                        <!-- 後一位按鈕icon -->
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>

                <!-- 隨機按鈕 -->
                <button class="random-btn">surprise me</button>
            </article>
        </section>    
    </main>
    <!-- javascript -->
    <script src="index.js"></script>
    ...
    • 補充 : 按鈕的icon是使用了Font Awesome，在HTML的Header中有利用CDN引用icon圖示，Font Awesome的官網請見下方參考來源。

JavaScript重點

  1. 將所有資料存入reviews中 
    1
    const reviews = [....]; //省略其中資料
  2. 利用.getElementById()與.querySelector()的方法來抓取元素 
    1
    2
    3
    4
    5
    6
    7
    8
    const img = document.getElementById("person-img"); // 頭像
    const author = document.getElementById("author"); // 姓名
    const job = document.getElementById("job"); // 職業
    const info = document.getElementById("info"); // 敘述

    const prevBtn = document.querySelector(".prev-btn"); // 前一位按鈕
    const nextBtn = document.querySelector(".next-btn"); // 後一位按鈕
    const randomBtn = document.querySelector(".random-btn"); // 隨機按鈕
  3. 用currentItem去紀錄目前的reviews中的索引值，進一步控制顯示的人物(預設為0) 
    1
    let currentItem = 0;
  4. 用currentItem找出對應的頭像、姓名、職業與敘述，並顯示出來 
    1
    2
    3
    4
    5
    6
    7
    function showPerson(){
      const item = reviews[currentItem];
      img.src = item.img;
      author.textContent = item.name;
      job.textContent = item.job;
      info.textContent = item.text;
    };
  5. 設置剛開啟網頁的預設資訊 
    1
    2
    3
    window.addEventListener("DOMContentLoaded",function(){
      showPerson(); // 顯示review[0]的資訊
    });
    • window : 代表了一整個包含DOM文件的視窗，其中也包含著document屬性，如下圖所示。
    • DOMContentLoaded : 在<head>...</head>裡面的<script>內去存取DOM的內容，實際上是無法的，因為此時 DOM結構尚未形成。所以必須透過DOMContentLoaded 來確保DOM結構被完整的讀取跟解析。
      • 我們也可以透過load事件，達到同樣的效果。但差別就在，load事件是在網頁「所有」資源都已經載入完成後才會觸發，而DOMContentLoaded事件是在DOM結構被完整的讀取跟解析後就會被觸發，不須等待外部資源讀取完成。換言之，load事件會在DOMContentLoaded之後才被觸發，而這兩個事件也都可以確保網頁結構載入完成。
  6. 設定後一位按鈕的點擊事件 
    1
    2
    3
    4
    5
    6
    7
    nextBtn.addEventListener("click", function(){
      currentItem++;
      if(currentItem > reviews.length - 1){
        currentItem = 0;
      } // 避免currentItem超出索引值
      showPerson();
    });
  7. 設定前一位按鈕的點擊事件 
    1
    2
    3
    4
    5
    6
    7
    prevBtn.addEventListener("click", function(){
      currentItem--;
      if(currentItem < 0){
        currentItem = reviews.length - 1;
      }//同樣避免currentItem超出索引值
      showPerson();
    });
  8. 設定隨機按鈕的點擊事件 
    1
    2
    3
    4
    randomBtn.addEventListener('click',function(){
      currentItem = Math.floor(Math.random() * reviews.length);
      showPerson();
    })

    和上篇文章的隨機按鈕點擊事件相似

參考與引用來源

  1. window物件介紹
  2. window介紹圖片來源
  3. Font Awesome介紹
  4. DOMContentLoaded介紹