JavaScript 入门

JavaScript 让网页能够响应用户的操作。所有浏览器都能运行它，无需安装任何额外软件；通过 Node.js 也可以在服务器端运行。本文从变量和函数开始，接着学习数组的使用，最后说明如何修改网页。

除 DOM 部分外，所有示例都使用 Node.js 运行，展示的输出为真实结果。DOM 部分需要在浏览器中测试。

需要准备的东西

任意网页浏览器（按 F12 并打开 Console 标签可以尝试命令）
或者 Node.js 18 及以上版本，用于在电脑上运行 `.js` 文件

工作原理

示意图：JavaScript 在浏览器中通过 DOM 运行，在电脑上通过 Node.js 运行

变量

值不会改变时使用 `const`，值会改变时使用 `let`。

const schoolName = "โรงเรียนตัวอย่าง";
let count = 0;
count = count + 1;
console.log(schoolName, count);

函数

function grade(score) {
  if (score >= 80) return "A";
  if (score >= 70) return "B";
  if (score >= 50) return "C";
  return "F";
}

函数接收输入、执行处理，并用 `return` 返回结果。`if` 语句按顺序判断，第一个为真的分支会被执行。

使用 map、reduce 和 forEach 处理数组

const students = [
  { name: "สมชาย", score: 85 },
  { name: "สมหญิง", score: 72 },
  { name: "สมศักดิ์", score: 45 },
];

function grade(score) {
  if (score >= 80) return "A";
  if (score >= 70) return "B";
  if (score >= 50) return "C";
  return "F";
}

const grades = students.map(s => `${s.name}: ${grade(s.score)}`);
const average = students.reduce((sum, s) => sum + s.score, 0) / students.length;

console.log("สวัสดี JavaScript");
grades.forEach(line => console.log(line));
console.log("คะแนนเฉลี่ย:", average.toFixed(2));

实际输出：

สวัสดี JavaScript
สมชาย: A
สมหญิง: B
สมศักดิ์: F
คะแนนเฉลี่ย: 67.33

`map` 通过转换每个元素生成新数组。
`reduce` 把所有元素合并为一个值。
`forEach` 对每个元素执行操作，但不生成新数组。
`toFixed(2)` 把数字四舍五入到两位小数用于显示。

操作网页（DOM）

在浏览器中，JavaScript 通过 DOM 读取和修改页面。下面的例子在点击按钮后改变文字：

<p id="message">ยังไม่ได้กด</p>
<button id="btn">กดฉัน</button>
<script>
  const message = document.getElementById("message");
  document.getElementById("btn").addEventListener("click", () => {
    message.textContent = "กดแล้ว!";
  });
</script>

将其保存为 `.html` 文件并在浏览器中打开，点击按钮后文字会改变。

常见错误

**用 `=` 代替 `===`：** `===` 同时比较值和类型，应优先使用。
**忘记 `const` 不能重新赋值：** 如果值需要改变，请使用 `let`。
**页面加载前就使用 DOM 元素：** 把脚本放在 `<body>` 末尾，或使用 `defer`。

下一步

为 DOM 示例添加一个输入框，输入分数时立即计算等级。然后学习 `fetch`，从服务器获取数据。

总结

JavaScript 以变量、函数和数组为基础，并通过 DOM 和事件操作页面。用简短、可运行的示例练习，是最快的学习方法。