【從零開始學JavaScript】實作練習 - 分類型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 `, //說明
    },
    ...
};

功能說明

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

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重點

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

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

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

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

新增displayMenuItems()函式 : 在畫面顯示出食物清單
1
2
3
function displayMenuItems(menuItems){
// Details...
};
- 下列的程式碼都在displayMenuItems()之內
- menuItems為輸入的陣列

新增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陣列將會呈現如下圖所示 :

利用Array.join()將陣列串聯起來
1
displayMenu = displayMenu.join("");
- Array.join()會將陣列中所有的元素連接、合併成一個字串，並回傳此字串。
  - 參數 : 用來隔開陣列中每個元素的字串。舉例中參數為” “，代表displayMenu的所有元素將會用一格空白來串接
- 此時的displayMenu會從Array轉變成String，這也是為何在宣告displayMenu時要用let的原因。
  
  宣告變數的詳細介紹，請見【02】宣告變數注意重點
將displayMenu設為食物清單DIV的內容碼
1
sectionCenter.innerHTML = displayMenu;
- HTMLDOMObject.innertHTML : 可以取得或設定 HTML Code 中的元素，也可以單純的將字串寫入 HTML Code 的某一個部分。詳情請見參考來源。
設定在網頁被讀入時，自動顯示所有內容(回到最外層)
1
2
3
window.addEventListener('DOMContentLoaded',function(){
displayMenuItems(menu);
});
window.addEventListener()的詳細介紹，請見【06】網頁練習 - 按鈕翻頁