搭配Copilot 教學,回憶超久沒用的 VS code。
🛠 第一步:建立資料夾與檔案
開啟 VS Code- 建立一個新的資料夾(可直接在桌面編輯),例如叫做
web-practice
- 在 VS Code 裡選擇
File > Open Folder...
,然後選妳剛剛建立的資料夾 - 在左邊的 Explorer 裡,按右鍵選 New File,新增兩個檔案:
index.html
script.js
這兩個檔案要放在同個資料夾。

第二步:撰寫 HTML(index.html
)
在 index.html
裡貼上內容:
<html>
<body>
<button id="clickMe">點我!</button>
<script src="script.js"></script>
</body>
</html>
<script src="script.js"></script>
這段是連接JS檔案必要程式,要放在 Body 前面。
第三步:撰寫 JavaScript(script.js
)
在 script.js
裡貼上這段 JavaScript 程式碼:
(記得要存檔喔喔喔)
const btn = document.getElementById("clickMe")
btn.addEventListener("click", function () {
alert("你點到我啦!");
});
🌐 第四步:預覽網頁
推薦方法:使用 Live Server 外掛:
- 在左邊選單中點選「Extensions(方塊圖示)」
- 搜尋 Live Server,然後按 Install
- 安裝好後,右鍵
index.html
→ 點 "Open with Live Server" - 瀏覽器會自動打開網頁,點按按鈕,就會跳出 JavaScript 訊息!

