Javascript入門-Day3：環境建置
閱讀時間約 4 分鐘
瀏覽器
瀏覽器是最基本的 JavaScript 執行環境。所有現代瀏覽器都支持 JavaScript，並內置了開發者工具來調試和測試 JavaScript 代碼。
- 開發者工具：按
F12或Ctrl+Shift+I打開開發者工具，可以使用控制台（Console）來輸入和執行 JavaScript 代碼。 - 編寫 JavaScript：
- 可以直接在 HTML 文件中使用
<script>標籤嵌入 JavaScript 代碼。 - 也可以將 JavaScript 代碼放在單獨的
.js文件中，並在 HTML 文件中通過<script src="path/to/your/script.js"></script>引入。
- 可以直接在 HTML 文件中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Example</title>
</head>
<body>
<h1>Hello, JavaScript!</h1>
<script>
console.log('Hello, JavaScript!');
</script>
<script src="script.js"></script>
</body>
</html>
Node.js
Node.js 是一個基於 V8 引擎的 JavaScript 運行環境，使得 JavaScript 可以在服務器端運行。
- 安裝 Node.js：
- 下載並安裝 Node.js Node.js 官網。
- 安裝完成後，可以使用命令行工具驗證安裝：
node -v和npm -v。
- 編寫 JavaScript：
- 創建一個新的
.js文件，例如app.js。 - 使用命令行運行 JavaScript 文件：
node app.js。
- 創建一個新的
// app.js
console.log('Hello, Node.js!');
- 使用 Node.js 提供本地伺服器：
- 安裝
http-server模組：npm install -g http-server。 - 在項目目錄中運行：
http-server。
- 安裝
# 安裝 http-server
npm install -g http-server
# 在項目目錄中運行
http-server
編輯器和 IDE
選擇合適的編輯器或集成開發環境（IDE）可以提高開發效率。以下是一些流行的選擇：
Visual Studio Code (VS Code)
- 由 Microsoft 開發，免費且開源。
- 支持豐富的擴展插件，如 ESLint、Prettier、Debugger for Chrome 等。
- 內置終端，方便運行命令。
架設本地開發伺服器
- 安裝 Live Server 插件。
- 打開 HTML 文件，右鍵選擇 "Open with Live Server"。
WebStorm
- 由 JetBrains 開發，商業軟件，但有免費試用。
- 強大的 JavaScript 支持和智能代碼補全。
- 支持版本控制、終端和集成調試。
架設本地開發伺服器
- 在 WebStorm 中打開你的項目。
- 在項目的右鍵選單中選擇 "Open in Browser"，WebStorm 將自動為你的項目啟動一個本地伺服器。
Sublime Text
- 輕量級編輯器，支持多種語言。
- 可以通過安裝 Package Control 添加插件支持。
架設本地開發伺服器
- 輕量級編輯器，支持多種語言。
- 可以通過安裝 Package Control 添加插件支持。
- Sublime Text 提供了多種編碼功能，包括語法高亮、代碼摺疊、自動完成和代碼導航等。
- 可以通過安裝第三方插件來擴展其功能，例如安裝 Emmet 可以提高 HTML 和 CSS 的編寫速度，安裝 SublimeLinter 和 JSHint 可以對 JavaScript 代碼進行靜態檢查。
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
前言：
雖然前面有些定義還沒有完整的解釋，但還是後面再說吧，
誰想一直看理論啊（摔本子）
前言：
前一篇講了 JS 的定義，這裡來談談能用它來做什麼，
希望能限制在 500 字以內（這是我看文章的極限，超過字數就會開始分心（?））
前言：
一直想要把自己的學習筆記整理整理，至少在寫下筆記的時候，也能釐清觀念。
結果拖延到現在，終於要提筆了，不知道能堅持多久(???)。
JS 資料型別分為兩大類，原始型別 (Primitive values) 和物件型別 (Objects)。
類別 (class) 是在 ES6 中引入，用來作為建立新物件的模板。它可以將程式碼封裝起來。
在網頁開發中，時間與日期的處理是重要且基礎的部分，本文將介紹 JavaScript 中的日期的處理方法，並提供範例程式來協助你理解。
專案產生大量又瑣碎的作業做處理，眼下要從iReport的設定檔(jrxml)擷取每一項套印參數出來，提供給別人做Excel公式的資料表進行作業。
JavaScript 的關鍵價值
JavaScript 是一種強大且廣泛使用的編程語言，具有許多價值和應用。以下整理 JavaScript 的關鍵價值：
客戶端網頁開發、跨平台開發：
JavaScript 是種瀏覽器的語言，可實現動態網頁效果，並通過操作 HTML 和 CSS，使網頁互動性提昇，提供
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
前言：
雖然前面有些定義還沒有完整的解釋，但還是後面再說吧，
誰想一直看理論啊（摔本子）
前言：
前一篇講了 JS 的定義，這裡來談談能用它來做什麼，
希望能限制在 500 字以內（這是我看文章的極限，超過字數就會開始分心（?））
前言：
一直想要把自己的學習筆記整理整理，至少在寫下筆記的時候，也能釐清觀念。
結果拖延到現在，終於要提筆了，不知道能堅持多久(???)。
JS 資料型別分為兩大類，原始型別 (Primitive values) 和物件型別 (Objects)。
類別 (class) 是在 ES6 中引入，用來作為建立新物件的模板。它可以將程式碼封裝起來。
在網頁開發中，時間與日期的處理是重要且基礎的部分，本文將介紹 JavaScript 中的日期的處理方法，並提供範例程式來協助你理解。
專案產生大量又瑣碎的作業做處理，眼下要從iReport的設定檔(jrxml)擷取每一項套印參數出來，提供給別人做Excel公式的資料表進行作業。
JavaScript 的關鍵價值
JavaScript 是一種強大且廣泛使用的編程語言，具有許多價值和應用。以下整理 JavaScript 的關鍵價值：
客戶端網頁開發、跨平台開發：
JavaScript 是種瀏覽器的語言，可實現動態網頁效果，並通過操作 HTML 和 CSS，使網頁互動性提昇，提供