JavaScript：讓網頁開始做事

先把 JavaScript 接進上一課的頁面

在 web-basics-playground 根目錄新增：

script.js

在 index.html 的 </body> 前加入：

<script src="script.js"></script>

然後在 script.js 寫：

console.log("JavaScript is running.");

重新整理頁面，打開 DevTools Console。如果看得到文字，代表瀏覽器已經成功載入並執行你的 JavaScript。

Console 是你現在最重要的觀察窗

console.log() 不會把文字畫到網頁上，而是把資訊印到開發者工具。

這很適合確認：「程式有沒有跑到這裡？」、「這個變數現在是多少？」、「資料長什麼樣？」

console.log(123);
console.log("hello");
console.log(true);

之後除錯時，Console 會比盯著畫面猜快很多。

變數：先把資料取一個名字

const courseName = "Web Basics";
let lesson = 3;

console.log(courseName);
console.log(lesson);

const 用在「不打算重新指定」的變數；let 用在之後可能改變的值。

例如：

let score = 10;
score = 20;

而：

const score = 10;
score = 20;

則會報錯，因為你正在嘗試重新指定一個 const。

JavaScript 裡常見的幾種值

const title = "Norelyn";     // string
const count = 3;             // number
const isReady = true;        // boolean
const nothing = null;        // null
let result;                  // undefined

你可以用：

console.log(typeof title);
console.log(typeof count);
console.log(typeof isReady);

先不用背完整型別系統。前端最常遇到的資料，基本上都會從字串、數字、布林值、陣列、物件這幾類開始。

字串可以組合

傳統寫法：

const name = "家睿";
console.log("你好，" + name + "！");

更常見的現代寫法是 template literal：

const name = "家睿";
const lesson = 3;

console.log(`你好，${name}。你正在上第 ${lesson} 課。`);

反引號 ` 裡可以用 ${...} 放入運算結果或變數。

運算與比較

const total = 10 + 5;
const left = 10 - 3;
const doubled = 4 * 2;
const half = 10 / 2;

比較則會得到 boolean：

console.log(10 > 5);      // true
console.log(3 < 1);       // false
console.log(5 === 5);     // true
console.log(5 === "5");   // false

這門課優先使用 === 和 !==。它們不會像 == 那樣先偷偷做型別轉換，初學時比較不容易產生意外。

if：讓程式做判斷

const score = 82;

if (score >= 60) {
  console.log("通過");
} else {
  console.log("再試一次");
}

流程是：

也可以加入更多區間：

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else {
  console.log("C or below");
}

邏輯運算：多個條件一起判斷

const isLoggedIn = true;
const isAdmin = false;

if (isLoggedIn && isAdmin) {
  console.log("可以進入管理頁");
}

例如：

if (!isLoggedIn) {
  console.log("請先登入");
}

函式：把一段工作取名字

function greet(name) {
  return `你好，${name}！`;
}

const message = greet("Norelyn");
console.log(message);

這裡：

函式最重要的價值不是「少打幾行」，而是把一段有意義的行為封裝起來。

Arrow function：另一種常見寫法

const greet = (name) => {
  return `你好，${name}！`;
};

之後前端程式碼會大量看到 arrow function。現在知道它是「函式的另一種語法」就夠，不需要一次研究所有差異。

Array：把一組同類資料放在一起

const skills = ["HTML", "CSS", "JavaScript"];

console.log(skills[0]);
console.log(skills.length);

陣列索引從 0 開始，所以第一項是 skills[0]。

你可以加入：

skills.push("DOM");

注意：const 陣列仍然可以修改裡面的內容；不能做的是把整個變數重新指定成另一個值。

迴圈：對每一項做同一件事

對初學前端來說，先從 for...of 開始很清楚：

const skills = ["HTML", "CSS", "JavaScript"];

for (const skill of skills) {
  console.log(skill);
}

它的意思幾乎可以直接讀成：「對 skills 裡每一個 skill，執行這段程式。」

之後也會常看到：

skills.forEach((skill) => {
  console.log(skill);
});

兩種都很常見。現在先理解迭代資料的概念，不需要追求哪個比較高級。

Object：描述一個東西的多個欄位

const course = {
  title: "Web Basics",
  lesson: 3,
  finished: false
};

console.log(course.title);
console.log(course.lesson);

物件非常重要，因為 API 回來的 JSON、前端狀態、使用者資料幾乎都會長得像這種 key/value 結構。

也可以修改：

course.finished = true;

Array + Object：這會開始像真實資料

const lessons = [
  { title: "HTML", done: true },
  { title: "CSS", done: true },
  { title: "JavaScript", done: false }
];

for (const lesson of lessons) {
  console.log(`${lesson.title}: ${lesson.done}`);
}

這種結構已經非常接近之後從 API 拿到的資料。

小心 truthy / falsy，但先不用背完整表

JavaScript 的 if 不只接受真正的 boolean。有些值會被視為 false，例如：

0
""
null
undefined
false

所以：

const name = "";

if (name) {
  console.log("有名字");
} else {
  console.log("名字是空的");
}

這種行為很方便，但也可能造成誤解。初學時，如果條件很重要，盡量讓判斷寫得明確。

錯誤訊息要看第一行，不要只看到紅色

故意寫錯：

console.log(userName);

如果 userName 沒有宣告，Console 會出現像 ReferenceError 的錯誤。

看到錯誤先讀三件事：

這比「JavaScript 壞掉了」有用得多。

不要把所有東西塞成一行

JavaScript 很自由，但程式碼首先是寫給人讀的。

const user = {
  name: "家睿",
  level: "beginner"
};

function describeUser(user) {
  return `${user.name} / ${user.level}`;
}

console.log(describeUser(user));

有清楚命名、適當換行、可讀結構，比炫技式縮寫更重要。

小挑戰：做一個純資料的課程進度程式

先不要碰 HTML，也不要修改畫面。只用 JavaScript 完成：

不要直接把完成數字寫死。程式應該真的根據陣列中的 done 計算。

最後收斂：JavaScript 在這一課負責什麼？

現在先把它理解成：

這些東西都還沒有碰畫面。下一課的 DOM，才會把 JavaScript 和 HTML 接起來：讓程式真的找到某個元素，讀它、改它。