使用 VS Code 和 Live Server 建立簡單網頁的教學

更新於 發佈於 閱讀時間約 3 分鐘

搭配Copilot 教學,回憶超久沒用的 VS code。

下載 VS Code

🛠 第一步:建立資料夾與檔案

開啟 VS Code

  1. 建立一個新的資料夾(可直接在桌面編輯),例如叫做 web-practice
  2. 在 VS Code 裡選擇 File > Open Folder...,然後選妳剛剛建立的資料夾
  3. 在左邊的 Explorer 裡,按右鍵選 New File,新增兩個檔案:

index.html script.js 這兩個檔案要放在同個資料夾

raw-image

第二步:撰寫 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 外掛:

  1. 在左邊選單中點選「Extensions(方塊圖示)」
  2. 搜尋 Live Server,然後按 Install
  3. 安裝好後,右鍵 index.html → 點 "Open with Live Server"
  4. 瀏覽器會自動打開網頁,點按按鈕,就會跳出 JavaScript 訊息!



raw-image
raw-image


留言
avatar-img
留言分享你的想法!
avatar-img
越南放大鏡 X 下班資工系
30會員
84內容數
雙重身份:越南放大鏡 X 下班資工系 政大東南亞語言學系是我接觸越南語的起點,畢業後找越南外派工作的生活跟資訊時,發現幾乎都是清單式的分享,很難身歷其境。所以我希望「越南放大鏡」可以帶讀者看到更多細節和深入的觀察。 - 下班資工系則是自學資工系的課程內容,記錄實際操作的過程,學習理論的過程。希望可以跟讀者一起成長。
2025/06/23
終於慢慢撿回JS的手感了!這篇文章深入淺出地解釋函式宣告、函式表達式、回呼函式,並搭配範例講解創作階段和執行階段。從Hoisting、匿名函式到非同步操作,助你釐清JS函式運作的關鍵概念。文末還有小測驗,幫助你融會貫通!
Thumbnail
2025/06/23
終於慢慢撿回JS的手感了!這篇文章深入淺出地解釋函式宣告、函式表達式、回呼函式,並搭配範例講解創作階段和執行階段。從Hoisting、匿名函式到非同步操作,助你釐清JS函式運作的關鍵概念。文末還有小測驗,幫助你融會貫通!
Thumbnail
2025/05/23
這篇文章提供 JavaScript 的基礎教學,涵蓋變數、作用域、資料型別、以及常見的錯誤與陷阱。以淺顯易懂的白話文搭配程式碼範例,幫助讀者快速掌握 JavaScript 的核心概念。
Thumbnail
2025/05/23
這篇文章提供 JavaScript 的基礎教學,涵蓋變數、作用域、資料型別、以及常見的錯誤與陷阱。以淺顯易懂的白話文搭配程式碼範例,幫助讀者快速掌握 JavaScript 的核心概念。
Thumbnail
2025/04/24
本系列文章將循序漸進地介紹 JavaScript 的核心概念,從基礎語法到進階應用,例如非同步程式設計和 React 基礎。內容淺顯易懂,並使用生活化的比喻幫助讀者理解,搭配程式碼範例,適合 JavaScript 初學者學習。
Thumbnail
2025/04/24
本系列文章將循序漸進地介紹 JavaScript 的核心概念,從基礎語法到進階應用,例如非同步程式設計和 React 基礎。內容淺顯易懂,並使用生活化的比喻幫助讀者理解,搭配程式碼範例,適合 JavaScript 初學者學習。
Thumbnail
看更多
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
接續上一篇 Step2:VC#專案建立 Step3:IIS新建站台 Step4:VC#架設到IIS中
Thumbnail
接續上一篇 Step2:VC#專案建立 Step3:IIS新建站台 Step4:VC#架設到IIS中
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
Thumbnail
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
在學習C#之前,必須先建立開發環境,例如安裝Visual Studio或其他IDE,並且建立第一個C#專案。可以在Visual Studio中或使用dotnet CLI來建立各種類型的專案。
Thumbnail
在學習C#之前,必須先建立開發環境,例如安裝Visual Studio或其他IDE,並且建立第一個C#專案。可以在Visual Studio中或使用dotnet CLI來建立各種類型的專案。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
VS code是什麼? Visual Studio Code(通常縮寫為VS Code)是微軟開發的一款免費且開源的跨平台文本編輯器。它支持廣泛的編程語言,提供了一系列先進功能和插件,讓開發者能更有效率地進行代碼編寫。VS Code擁有優秀的代碼自動完成、錯誤偵測、內建的版本控制系統等特性。
Thumbnail
VS code是什麼? Visual Studio Code(通常縮寫為VS Code)是微軟開發的一款免費且開源的跨平台文本編輯器。它支持廣泛的編程語言,提供了一系列先進功能和插件,讓開發者能更有效率地進行代碼編寫。VS Code擁有優秀的代碼自動完成、錯誤偵測、內建的版本控制系統等特性。
Thumbnail
本文章介紹了建立網頁的整個流程,包括設置 Templates, Views, Urls 等步驟。透過這些步驟,大家便能創建一個新的網頁,並成功測試。
Thumbnail
本文章介紹了建立網頁的整個流程,包括設置 Templates, Views, Urls 等步驟。透過這些步驟,大家便能創建一個新的網頁,並成功測試。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News