我已經使用 HTML 建立網站架構，再透過 CSS 調整外觀。
不過，目前的「開始推薦」按鈕還沒有實際功能。今天要認識第三個重要的網頁技術：JavaScript。

一、JavaScript 可以做什麼？
JavaScript 可以讓網頁產生互動，例如：

• 點擊按鈕後執行動作。
• 讀取使用者輸入的食材。
• 根據條件顯示不同的食譜。
• 後續串接 AI API，取得 AI 產生的內容。

簡單來說，HTML 負責結構、CSS 負責外觀，而 JavaScript 負責互動與邏輯。

二、建立 JavaScript 檔案
首先，在專案資料夾中建立 script.js。
接著在 index.html 的 前加入：

這樣瀏覽器就能載入 JavaScript 程式碼。

三、讓按鈕產生反應
接下來，在 script.js 中加入：
const button = document.querySelector("button");
button.addEventListener("click", function () {
alert("歡迎使用 AI Recipe！");
});
這段程式碼的意思是：

1. document.querySelector("button")：找到網頁上的按鈕。
2. addEventListener("click", ...)：監聽使用者的點擊動作。
3. alert(...)：顯示提示訊息。

儲存檔案並重新整理網頁後，點擊「開始推薦」按鈕，就會跳出提示視窗。
雖然這個功能很簡單，但代表網站已經可以對使用者的操作做出回應了！

四、今天的成果

今天成功建立了 JavaScript 檔案，也學會如何讓按鈕執行指定動作。
這只是最基本的互動，接下來還需要讓網站讀取使用者輸入的食材，才能進一步完成食譜推薦。
明天就來讓使用者輸入的食材真正派上用場！