在經過HTML、CSS的學習後，接下來要提到的JavaScript，對於增加網頁的互動功能性，扮演舉足輕重的角色。舉凡點擊按鈕後，會產生相對應的互動，諸如產生填寫表單供網頁使用者填寫、關閉填寫表單、送出填寫完的表單內容資料等功能。

有鑑於有了ChatGPT的幫忙，目前要撰寫出JavaScript於網頁互動基本且實用功能，大部分ChatGPT都可以很順利地完成任務，並提供可用的程式碼，因此接下來主要的工作，就是負責檢查有無明顯錯誤，以及有無不合於自己網頁的結構或命名等配對性的問題。

這裡只舉一個簡單但常用的JavaScript程式碼例子，並簡單介紹如何解讀並配合自己的網頁功能需求進行修改。其餘者，其實大部分都可藉由詢問ChatGPT來取得答案，於此不再贅述。

以下是簡單的按鈕功能，將分別拆解該程式碼邏輯。

// 綁定查詢按鈕
const searchBtnSchedule = document.getElementById("btn_search_schedule");

if (!searchBtnSchedule) {
  console.error("找不到 #btn_search_schedule 按鈕，請確認 HTML 結構！");
  return; // 中止後續執行
}

searchBtnSchedule.addEventListener("click", () => {
  console.log("🔍 查詢按鈕被點擊，開始獲取班表資料...");
  searchSchedule(); // 呼叫資料取得邏輯
});

• 即先找尋HTML中的按鈕元件，並定義為常數變數後

  • JavaScript是物件導向語言，通常會有一個物件，並根據方法或屬性，進行物件的操作，此例中document，代表整個HTML文件的物件，並藉由getElementById()方法，以ID選擇器進行搜尋，並將搜尋結果存入常數變數searchBtnSchedule中。

  • 從這裡我們可以發現，程式在語意理解上相當直觀，變數及方法名稱，基本都是採用具可解讀性的方式命名，並且從該命名方式，其實馬上可以猜測，是否可以用類別(class)來進行物件搜尋，當有這個問題，就可以馬上去問ChatGPT，不出所料，馬上可以得到以下的表格資訊，除了告訴你方法名稱外，連傳回資料的型態跟後續用法的差異，都一併幫你整理出來，大大降低了學習JavaScript入門的門檻！

    ✅ 常見的 DOM 選取方法比較表

• 接著針對有無找到該按鈕，寫入if條件式判斷，若無找到該按鈕，會提示相關訊息，並中止執行。
  • 這裡提供了我們如何在程式運作中，即時了解執行到哪個階段的程式邏輯，該邏輯其實在往後的程式撰寫中，都可以在適當的地方寫入，除了可以大大增加程式的可解讀性之外，對未來在程式除錯上絕對有相當大的幫助。
  • 至於console.error()的結果，則可於網頁中按F12，並在「Console」分頁下找到該訊息。
• 若有找到該按鈕，則寫入監聽事件程式，以「滑鼠點擊」的事件觸發後續的功能，在此例是呼叫一個搜尋排程的方程式。
  • 這裡新出現一個addEventListener()方法，用於監聽該按鈕，有無發生特定的事件，並進行相對應的動作。同樣地，方法名稱相當直觀，並且應該也可以想像，除了點擊滑鼠click事件之外，應該還有其他事件可供選擇，若有想到相關的問題，二話不說，馬上求助於ChatGPT，可以自己試試看。
  • 而監聽到滑鼠點擊後，開始執行動作，這裡使用到特殊的箭頭函式(arrow function)語法來執行動作，因該語法初學時，理解上花了相當時間，因此將在下面另外介紹。
  • 接著，同樣的程式邏輯，再次運用console.log()的方法，追蹤執行的階段進度，有助於程式可解讀性及除錯。在之後，試著呼叫searchSchedule()函式，來進行排程的查詢。呼叫函式的方式及提醒事項，將在後續另外介紹。