JavaScript 入門：5 分鐘寫出你的第一個程式

2026-01-26 07:44 | By justin | JavaScript
(Updated: 2026-01-26 07:44)

JavaScript 入門：5 分鐘寫出你的第一個程式

各位好！

這是 JavaScript 教學系列的第一篇，我們會從最基礎開始，讓你在 5 分鐘內寫出並執行你的第一個 JavaScript 程式。

JavaScript 是什麼？

JavaScript（簡稱 JS） 是一種程式語言，主要用於：

-網頁互動：讓網頁不只是靜態文字，而是能點擊、動畫、即時更新 -後端開發：透過 Node.js，可以用 JavaScript 開發伺服器 -行動 App：使用 React Native 開發手機應用程式 -遊戲開發：製作瀏覽器遊戲 -自動化工具：自動化日常任務

簡單來說：JavaScript 是目前世界上最流行的程式語言之一，學會它可以做很多事。

為什麼要學 JavaScript？

  1. 唯一能在瀏覽器執行的程式語言：想做網頁，就必須會 JS
  2. 前後端通吃：一種語言可以寫前端也能寫後端
  3. 生態系豐富：有無數現成的工具和函式庫可以使用
  4. 工作機會多：JavaScript 開發者需求量大

方法一：在瀏覽器中執行 JavaScript

這是最簡單的方法，不需要安裝任何東西。

步驟一：打開瀏覽器開發者工具

  1. 打開任何瀏覽器（Chrome、Edge、Firefox 都可以）
  2. 按下 F12 鍵（或右鍵 → 檢查）
  3. 點選 Console（主控台）分頁

步驟二：寫你的第一行程式

在 Console 中輸入：

console.log("Hello, World!");

按下 Enter，你會看到：

Hello, World!

恭喜！你剛剛執行了你的第一個 JavaScript 程式！

試試更多

繼續在 Console 中試試這些：

// 基本計算
console.log(5 + 3);          // 8

// 變數
const name = "小明";
console.log("你好，" + name);  // 你好，小明

// 條件判斷
const age = 18;
if (age >= 18) {
  console.log("你是成年人");
} else {
  console.log("你還未成年");
}

方法二：在 HTML 檔案中執行 JavaScript

步驟一：建立 HTML 檔案

  1. 打開任何文字編輯器（記事本、VS Code 都可以）
  2. 建立一個新檔案，命名為 index.html
  3. 貼上以下內容：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <title>我的第一個 JavaScript 程式</title>
</head>
<body>
  <h1>JavaScript 測試頁面</h1>
  <button id="myButton">點我</button>
  <p id="output"></p>

  <script>
    // 這裡寫 JavaScript 程式碼
    console.log("頁面已載入");

    // 取得按鈕和輸出元素
    const button = document.getElementById("myButton");
    const output = document.getElementById("output");

    // 點擊按鈕時執行
    button.addEventListener("click", function() {
      output.textContent = "你點了按鈕！時間：" + new Date().toLocaleTimeString();
    });
  </script>
</body>
</html>

步驟二：開啟檔案

  1. 用瀏覽器打開這個 HTML 檔案（雙擊或拖曳到瀏覽器）
  2. 點擊「點我」按鈕
  3. 你會看到文字顯示在頁面上

步驟三：查看 Console 輸出

  1. 按 F12 開啟開發者工具
  2. 切換到 Console 分頁
  3. 你會看到 "頁面已載入" 的訊息

方法三：安裝 Node.js 在電腦上執行

為什麼需要 Node.js？

  • 瀏覽器中的 JavaScript 只能操作網頁
  • Node.js 讓 JavaScript 可以在電腦上執行，做更多事情

步驟一：安裝 Node.js

  1. 前往官網：https://nodejs.org/
  2. 下載 LTS 版本（長期支援版）
  3. 執行安裝檔，一路按「下一步」
  4. 安裝完成後，打開終端機（PowerShell 或 CMD）
  5. 輸入以下指令確認安裝成功：
node --version

如果顯示版本號碼（例如 v22.17.0），代表安裝成功。

步驟二：建立 JavaScript 檔案

  1. 用文字編輯器建立一個檔案，命名為 app.js
  2. 輸入以下內容：
console.log("Hello from Node.js!");

const name = "小明";
const age = 25;

console.log(`我的名字是 ${name}，今年 ${age} 歲`);

// 這是註釋
function greet(person) {
  return `你好，${person}！`;
}

console.log(greet("小華"));
console.log(greet("小美"));

步驟三：執行檔案

在終端機中，切換到檔案所在的目錄，然後執行：

node app.js

你會看到：

Hello from Node.js!
我的名字是小明，今年 25 歲
你好，小華！
你好，小美！

推薦開發工具：VS Code

如果你要認真學 JavaScript，建議安裝 Visual Studio Code。

為什麼推薦 VS Code？

  • 免費且開源
  • 功能強大，擴充套件豐富
  • 內建終端機
  • 語法高亮、自動完成
  • 支援所有主流語言

安裝步驟

  1. 前往官網：https://code.visualstudio.com/
  2. 下載並安裝
  3. 第一次開啟時，可以安裝推薦的中文語言包

在 VS Code 中執行 JavaScript

  1. 用 VS Code 開啟包含 app.js 的資料夾
  2. 按 Ctrl + ` 開啟內建終端機
  3. 輸入 node app.js 執行程式

三種方法比較

方法 適合情境 優點 缺點
瀏覽器 Console 快速測試、學習基礎 不用安裝、立即可用 無法儲存、功能受限
HTML 檔案 網頁互動 可以操作網頁元素 需要 HTML 知識
Node.js 寫完整程式、後端開發 功能完整、可存檔 需要安裝

學習建議： 1. 剛開始：用瀏覽器 Console 練習基本語法 2. 學網頁互動：用 HTML 檔案 3. 做專案：安裝 Node.js + VS Code

第一個完整範例：簡單計算機

讓我們用 JavaScript 做一個簡單的計算機。

建立 calculator.html：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <title>簡單計算機</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 400px;
      margin: 50px auto;
      padding: 20px;
      background-color: #f0f0f0;
    }
    .calculator {
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    input {
      width: 100%;
      padding: 10px;
      margin: 5px 0;
      font-size: 16px;
      box-sizing: border-box;
    }
    button {
      width: 23%;
      padding: 15px;
      margin: 5px 1%;
      font-size: 18px;
      cursor: pointer;
      border: none;
      background-color: #4CAF50;
      color: white;
      border-radius: 5px;
    }
    button:hover {
      background-color: #45a049;
    }
    #result {
      font-size: 24px;
      font-weight: bold;
      color: #333;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div class="calculator">
    <h2>簡單計算機</h2>
    <input type="number" id="num1" placeholder="輸入第一個數字">
    <input type="number" id="num2" placeholder="輸入第二個數字">

    <div>
      <button onclick="calculate('+')">+</button>
      <button onclick="calculate('-')">-</button>
      <button onclick="calculate('*')">×</button>
      <button onclick="calculate('/')">/</button>
    </div>

    <div id="result"></div>
  </div>

  <script>
    function calculate(operator) {
      // 取得輸入的數字
      const num1 = parseFloat(document.getElementById("num1").value);
      const num2 = parseFloat(document.getElementById("num2").value);
      const resultElement = document.getElementById("result");

      // 檢查是否為有效數字
      if (isNaN(num1) || isNaN(num2)) {
        resultElement.textContent = "請輸入有效的數字！";
        return;
      }

      let result;

      // 根據運算子計算
      switch (operator) {
        case '+':
          result = num1 + num2;
          break;
        case '-':
          result = num1 - num2;
          break;
        case '*':
          result = num1 * num2;
          break;
        case '/':
          if (num2 === 0) {
            resultElement.textContent = "錯誤：不能除以 0";
            return;
          }
          result = num1 / num2;
          break;
        default:
          resultElement.textContent = "未知的運算子";
          return;
      }

      // 顯示結果
      resultElement.textContent = `結果：${result}`;
    }
  </script>
</body>
</html>

功能說明： - 使用者輸入兩個數字 - 點選運算子按鈕（+、-、×、÷） - 程式計算並顯示結果 - 有基本的錯誤處理（無效數字、除以 0）

試試看： 1. 儲存為 HTML 檔案 2. 用瀏覽器開啟 3. 輸入數字並點選運算子

常見問題 FAQ

Q1: JavaScript 和 Java 是一樣的嗎？

A: 完全不一樣！ 這是最常見的誤解： - JavaScript：主要用於網頁開發，由 Netscape 開發 - Java：通用型程式語言，由 Sun Microsystems 開發 - 名字相似只是當年的行銷策略，兩者沒有直接關係

Q2: 我需要先學 HTML 和 CSS 嗎？

A: 看你的目標： - 想做網頁：建議先學基礎 HTML/CSS，再學 JavaScript - 想學程式邏輯：可以直接學 JavaScript，用 Node.js 執行 - 想學框架（React/Next.js）：需要基本的 HTML/CSS 知識

Q3: console.log 是什麼？

A: console.log() 是用來「印出」資訊到主控台的函式，主要用途： - 除錯：看變數的值是什麼 - 測試：確認程式執行到某個地方 - 學習：理解程式的執行流程

Q4: 我執行 node 指令時顯示「找不到命令」？

A: 可能的原因： 1. Node.js 沒有安裝成功 → 重新安裝 2. 環境變數沒有設定 → 重新安裝時確認有勾選「Add to PATH」 3. 需要重新開啟終端機 → 關掉重開

Q5: 我的程式碼沒有執行，也沒有錯誤訊息？

A: 檢查： 1. 打開瀏覽器開發者工具（F12）的 Console，看有沒有錯誤訊息 2. 確認 JavaScript 程式碼有放在 <script> 標籤裡 3. 確認 HTML 檔案有用瀏覽器正確開啟（不是用記事本打開）

下一步

完成這篇後，你已經：

  • 知道 JavaScript 是什麼、能做什麼
  • 會用三種方法執行 JavaScript
  • 安裝了 Node.js 和 VS Code（選用）
  • 寫出並執行了你的第一個程式

現在你可以前往下一篇：
單元二：變數與資料型別

在那裡，我們會深入學習如何儲存和操作資料！

0 留言

目前沒有留言

發表留言
回覆
← Back to Blog