2024-05-28|閱讀時間 ‧ 約 24 分鐘

Javascript入門-Day3：環境建置

Javascript

瀏覽器

瀏覽器是最基本的 JavaScript 執行環境。所有現代瀏覽器都支持 JavaScript，並內置了開發者工具來調試和測試 JavaScript 代碼。

開發者工具：按 F12 或 Ctrl+Shift+I 打開開發者工具，可以使用控制台（Console）來輸入和執行 JavaScript 代碼。
編寫 JavaScript：
- 可以直接在 HTML 文件中使用 <script> 標籤嵌入 JavaScript 代碼。
- 也可以將 JavaScript 代碼放在單獨的 .js 文件中，並在 HTML 文件中通過 <script src="path/to/your/script.js"></script> 引入。

<!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 代碼進行靜態檢查。

分享至

成為作者繼續創作的動力吧！

討論區

追蹤

Javascript入門-Day3：環境建置

瀏覽器

Node.js

編輯器和 IDE

Visual Studio Code (VS Code)

WebStorm

Sublime Text

作者的相關文章

Michael楊的其他內容

你可能也想看

發表回應

Javascript入門-Day3：環境建置

瀏覽器

Node.js

編輯器和 IDE

Visual Studio Code (VS Code)

WebStorm

Sublime Text

作者的相關文章

Michael楊 的其他內容

你可能也想看

發表回應

Michael楊的其他內容