form 表單

form
input[type="submit"]
button[type="submit"]
sumbit事件
event.preventDefault()

searchForm 是<form>節點，在<form>裝監聽器監聽submit事件，被觸發的函式 event handler，命名為onSearchFormSubmitted，以便之後除錯。browser在執行event handler時，會建立一個"事件物件(event object)"，事件物件會包含與此事件有關的屬性，並以參數形式回傳給event handler，所以 event handler function 名稱 (event) 參數寫event。

searchForm.addEventListener('submit', function onSearchFormSubmitted(event) {
  //取消browser的預設行為事件(重新導向當前頁面)
  event.preventDefault()
  //取得搜尋關鍵字 = input節點的值、去前後字串的空白、統一小寫
  const keyword = searchInput.value.trim().toLowerCase()
  //儲存符合篩選條件的項目，放入此空陣列
  let filteredMovies = []
  //錯誤處理：輸入無效字串
  //若沒有字keyword.length會是0，Boolean會是false，前面加! =>!false 等於 true，顯示警告視窗
  //if (!keyword.length) {
    return alert('請輸入有效字串！')
  }//取消這個判斷式，沒輸入仍顯示全電影清單，而非空白。
  //條件篩選
  //陣列.filter方法(參數為條件函式，簡化為 =>函式)，變數filteredMovies接回傳值
  filteredMovies = movies.filter((movie) =>
    movie.title.toLowerCase().includes(keyword)
  )
  //再次使用renderMovieList函式，重新輸出至畫面
  renderMovieList(filteredMovies)
})

優化使用者體驗

兩個簡單的優化：

• 當使用者沒有輸入任何關鍵字時，畫面顯示全部電影 (在 include()中傳入空字串，所有項目都會通過篩選)

• 當使用者輸入的關鍵字找不到符合條件的項目時，跳出提示

if (filteredMovies.length === 0) {
  return alert(`您輸入的關鍵字：${keyword} 沒有符合條件的電影`)
}

若filteredMovies.length = 0 會為falsy，所以 !falsy => true

if (!filteredMovies.length) {
  return alert(`您輸入的關鍵字：${keyword} 沒有符合條件的電影`)
}