Menu

前言

• 由於此次練習需要較多的說明與介紹，故分作上下兩篇。
• 在JavaScript中，有個名為menu的陣列(如下)，用來記錄所有的食物資訊。

const menu = [
    {
      id: 1, //編號
      title: "buttermilk pancakes", //食物名稱
      category: "breakfast", //食物類別
      price: 15.99, //價格
      img: "./images/item-1.jpeg", //圖片連結
      desc: `I'm baby woke mlkshk wolf bitters live-edge blue bottle, hammock freegan copper mug whatever cold-pressed `, //說明
    },
    ...
};

功能說明

1. 標題
2. 類別按鈕 :
   • 我們的目標並非直接在HTML利用<button>...</button>來手動新增按鈕，而是在JavaScript中利用函式來自動生成按鈕。此舉動可以讓我們在以後如果要新增新的食物，但其類別也是新的，就可以直接在menu陣列中新增資料，而不用特別去HTML檔中手動新增。
3. 食物清單

HTML重點

• 主框架 :

  <section class="menu">
  
    <!-- 標題 -->
    <div class="title">
      <h2>Our Menu</h2>
      <div class="underline"></div>
    </div>
  
    <!-- 類別按鈕 -->
    <div class="btn-container">
        <!-- 內容於JavaScript中生成 -->
    </div>
  
    <!-- 食物清單 -->
    <div class="section-center">
        <!-- 內容於JavaScript中生成 -->
    </div>
  
  </section>
  

• 重點 :
  1. 將類別按鈕的Class設為btn-container
  2. 將食物清單的Class設為section-center

JavaScript重點

1. 利用class="btn-container"去抓取類別按鈕的div元素

   const container = document.querySelector('.btn-container');  
   

2. 利用class="section-center"去抓取食物清單的div元素

   const sectionCenter = document.querySelector('.section-center');
   

3. 新增displayMenuItems()函式 : 在畫面顯示出食物清單

   function displayMenuItems(menuItems){
     // Details...
   };
   

• 下列的程式碼都在displayMenuItems()之內
• menuItems為輸入的陣列

4. 新增displayMenu陣列 : 儲存食物清單表現方式的HTML碼

   let displayMenu = menuItems.map(function(item){
       return `<article class="menu-item">
                 <img src="${item.img}" class="photo" alt=${item.title}">
                 <div class="item-info">
                   <header>
                     <h4>${item.title}</h4>
                     <h4 class="price">$${item.price}</h4>
                   </header>
                   <p class="item-text">${item.desc}</p>
                 </div>
               </article>`;
   });
   

   • 上面所提的HTML碼，若以單一食物為例 :

     <article class="menu-item">
           <img src="./images/item-1.jpeg" class="photo" alt= buttermilk pancakes">
         <div class="item-info">
             <header>
               <h4>buttermilk pancakes</h4>
               <h4 class="price">$15.99</h4>
             </header>
             <p class="item-text">I'm baby woke mlkshk wolf bitters live-edge blue bottle, hammock freegan copper mug whatever cold-pressed</p>
         </div>
     </article>
     

     • 結果 :
       

   • Array.map()需要回傳一個值，它會把原始的陣列運算後重新組合一個新的陣列 :

     • 如果不回傳則是undefined
     • 回傳數量等於原始陣列的長度
     • 在回傳的值中，可以塞入${原始陣列的key}，回傳時便會隨著陣列中不同物件而回傳不同的值

   • 最後，displayMenu陣列將會呈現如下圖所示 :
     

5. 利用Array.join()將陣列串聯起來

   displayMenu = displayMenu.join(""); 
   

   • Array.join()會將陣列中所有的元素連接、合併成一個字串，並回傳此字串。
     • 參數 : 用來隔開陣列中每個元素的字串。舉例中參數為" "，代表displayMenu的所有元素將會用一格空白來串接
   • 此時的displayMenu會從Array轉變成String，這也是為何在宣告displayMenu時要用let的原因。

   宣告變數的詳細介紹，請見【02】宣告變數注意重點

6. 將displayMenu設為食物清單DIV的內容碼

   sectionCenter.innerHTML = displayMenu;
   

   • HTMLDOMObject.innertHTML : 可以取得或設定 HTML Code 中的元素，也可以單純的將字串寫入 HTML Code 的某一個部分。詳情請見參考來源。

7. 設定在網頁被讀入時，自動顯示所有內容(回到最外層)

   window.addEventListener('DOMContentLoaded',function(){
     displayMenuItems(menu);
   });
   

   window.addEventListener()的詳細介紹，請見【06】網頁練習 - 按鈕翻頁

參考與引用來源

1. Array.map()介紹
2. Array.join()介紹
3. innerHTML介紹