編寫[元件]流程: navBar & searchBar

searchBar _功能（元件）, 它是整個全部網頁面的一小部分, 但也是一個專案

舉例：

電影網頁在規劃的時候, 歸納很多讓使用者介面便利的元件及工具.

這一小工具元件, 譬如：搜尋功能 .

這個搜尋功能讓使用者能有提供ＸＸＸ服務, 這是一個新的問題.

也建議透過 ”工作流程” 去撰寫ＡＰＰ

這個搜尋功能的小專案, 小元件,

在『網頁編寫流程』提出 “尋找答案及方法” 時,

多個項目中一個小項目

Step1. 分析問題

打造一個NavBar 有 favorita 和 Home 的標籤 及一個小漢堡

打造一個能透過搜尋功能, 讓使用者在清單中快速找到要看的電影, 另外要嵌入ＡＰＩ電影清單.

要讓使用者快速找到電影

Step2 . 拆解問題：

1. Search Bar 元件
2. 從Search 綁定事件點擊, 觸發搜尋功能
3. 輸入內容與配對的標題相符合
4. 結果回傳到網頁上, 尋找答案和陣列

Step3. 尋找答案 ：

• 元件ＵＩ＿使用bootstrap 4
• 事件點擊件＿ 透過在按鈕上設置監聽功能去綁定事件
• 表單的預設行為取消 < //////非常重要> <非常著要> 有附圖
• 取得 search bar 的 input 值
• 查看 data 變數裡存放的電影清單，比對 input 值和 title 屬性
• 篩選出「title 含有 input 值」的電影，產生一組搜尋結果
• 運用已經寫好的 displayDataList 函式，將篩選後的輸出至畫面

STEP4.製作出自己的編寫流程

前置框架 ：

• 繪製區塊＆html 標籤
• FIGMA做群組, 及HTML架構.
• 編寫main.js , 將區塊做註解及定義

（一）NavBar :

後製HTML編寫

打開測試運行 ：

（二）SearchBar ：

後製ＨＴＭＬ

注意：請打開DevTool google

輸入文字在input 上 , 並按下 button Search 會發生什麼, 請仔細看！

下面的console.log(clike!) 瞬間消失！ 會重新刷新.

表單按鈕的預設行為

之前在學習 DOM 操作時，介紹「表單事件」時有提過表單按鈕的預設行為。當你把 <form> 和 <button> 放在一起時，<button> 的預設行為是「將表單內容透過 HTTP request 提交給遠端伺服器」，除非使用 Ajax 技術發送非同步請求，否則一般的 HTTP request 都會刷新瀏覽器畫面。

雖然此刻我們並沒有指定任何 HTTP request 的資訊，但<button> 仍然刷新了網頁。

Event.preventDefault()

運用 DOM 操作時，通常會使用 JavaScript 來掌控 UI 行為，因此遇到這種有預設行為的元件，需要使用 event.preventDefault() 來終止它們的預設行為。

searchForm.addEventListener('submit', event => {
  event.preventDefault()
  console.log('click!')
})