---
# System prepended metadata

title: 跟著ChatGPT 學JavaScript (基礎篇)
tags: [JavaScript]

---

 <p style="font-size:30px;font-weight: bold;">跟著ChatGPT 學JavaScript (基礎篇)</p>


---


<p style="font-size:20px;font-weight: bold;">目錄</p>

[TOC]

<br />

## 我們學習的目標
從 0 開始學 JavaScript，搭配練習題，一步步讓你學會：

* 基礎語法與概念（變數、條件、迴圈、函式）
* 操作網頁（DOM 操作）
* 事件處理（點擊、輸入等互動）
* 基礎專案應用（像是計算機、待辦清單等）
<br />

## 課程 1：變數與資料型別
✅ 學習目標：
* 變數（const /let /var）
* 資料型別（字串、數字、布林）

```
let name = "小明";     // 字串
const age = 25;        // 數字
let isStudent = true;  // 布林值（true/false）

console.log(name);
console.log(age);
console.log(isStudent);
```

* let 可以改變值；const 是常數，不能改。
不太建議用var，因為var表示全域變數。
* console.log() 是把訊息印出來，幫助你看程式執行的結果。
<br />
#### 練習 1：請你完成下列練習

宣告一個變數 myName，內容是你的名字。
宣告一個變數 myAge，內容是你的年齡。
宣告一個變數 isHappy，內容是 true
使用 console.log() 印出這三個變數。
<br />

## 課程 2：條件判斷（if / else）
✅ 學習目標：
* if / else 判斷語句
* 比較運算子（`===, >, <, !==` 等）
```
let age = 18;

if (age >= 18) {
  console.log("你是成年人");
} else {
  console.log("你還是未成年");
}
```

* `===`：
檢查是否完全相等(包含型別-比較嚴格)
* `==`：
檢查是否完全相等
* `>=`：
大於等於
* `!=`：
不相等

### 練習 2：條件判斷

宣告一個變數 score，給它一個數字分數。
用 if 判斷：
如果分數大於等於 60，印出「及格！」
否則印出「不及格～加油！」
<br />

## 課程 3：迴圈（Loop）
✅ 學習目標：
* for 迴圈語法
讓電腦幫你重複做事！

```
// 把 1 到 5 印出來
for (let i = 1; i <= 5; i++) {
  console.log(i);
}
```
* let i = 1：從 1 開始
* i <= 5：只要 i 小於等於 5 就繼續跑
* i++：每次加 1

### 練習 3：自己寫一個迴圈！

請你：
用 for 迴圈，把 1 到 10 的數字印出來
然後每個數字後面印一句：「我在學 JavaScript！」

範例輸出：
```
1 我在學 JavaScript！
2 我在學 JavaScript！
...
10 我在學 JavaScript！
```
🔍 小提示：
先了解如何同時輸出變數跟字串
<br />

## 挑戰小遊戲：

### 「九九乘法表」
我們要印出從 1x1 到 9x9 的乘法表！

🔍 小提示：
要用到兩個迴圈
<br />

### 猜數字小遊戲（簡易版）
遊戲規則：

給兩個數字，電腦是數字 5，使用者是數字 3，
如果使用者猜對，顯示「恭喜你猜對了！」
使用者猜錯就提示「太大」或「太小」
<br />

### 猜數字小遊戲（進階）
遊戲規則：

電腦產生一個隨機數字（1~10）
使用者猜一個數字
如果猜對，顯示「恭喜你猜對了！」
猜錯就提示「太大」或「太小」

🔍 小提示：
可以用以下方法試試看
* Math.random( )
* Math.floor( )
* prompt( )
