欢迎来到网页编程的世界！

你好！在本章节中，我们将学习如何让网页变得动态、具备思考能力，并能响应用户的操作。如果说 HTML 是网页的“骨架”，CSS 是网页的“衣服”，那么 JavaScript 就是网页的“大脑”。学完这些笔记后，你将理解客户端脚本（client-side scripting）的运作原理，并学会利用它来建立互动式网页。别担心，即使你从未写过程序代码也没关系——我们将一步一步来！

1. 理解客户端脚本 (Client-Side Scripting)

在 IT 领域，我们常提到“客户端 (client)”与“服务器 (server)”。客户端就是正在使用网页浏览器的你（例如你在用 Chrome 或 Safari）。服务器则是一台远程的高性能计算机，负责将网页传送给你。

客户端脚本（使用 JavaScript）是指程序代码直接在“你的”计算机上执行，而不是在服务器上执行。

比喻： 想象一下去订做一份“DIY 比萨”。
服务器端： 厨师把比萨烤好，然后把成品送给你。
客户端： 厨师只把面团和配料发给你，然后由“你”在餐桌上自己动手组装。对餐厅来说这样更有效率，而且你可以立即调整配料！

为什么要用它？
  • 速度： 当用户点击某个东西时，浏览器不必每次都“询问”服务器。
  • 互动性： 例如图片库、倒数计时器，以及会弹出的菜单。

快速回顾： 客户端脚本在用户的浏览器上执行，让网页速度更快，互动感更强。

2. 变量与数据类型

变量 (variable) 就像一个贴了标签的盒子。你可以把一项信息放进盒子里，给它一个名称，稍后在程序代码中随时调用它。

“盒子”的种类（数据类型）

JavaScript 需要知道你存储的是哪种数据：

  • 字符串 (String)： 文本数据，必须写在“引号”内。（例如："Hello Student"）
  • 整数 (Integer)： 没有小数点的整数。（例如：10, -5）
  • 浮点数 (Float)： 带有小数的数字。（例如：10.50）
  • 布尔值 (Boolean)： 只有两个可能值：true 或 false。就像电灯开关一样！

全局变量 vs. 局部变量

你建立变量的位置非常重要！
1. 全局变量 (Global Variables)： 在函数外建立。脚本中的任何部分都能看到并使用它们。
2. 局部变量 (Local Variables)： 在特定函数内建立。它们只在该函数执行期间存在。

常见错误： 忘记给字符串加上引号！如果你写 name = John;，计算机回去寻找一个名为 John 的变量。如果你写 name = "John";，它就会知道你是指文本 John。

重点总结： 变量用来存储数据。文本请用字符串，整数请用整数，而真/假判断请用布尔值。

3. 运算符：必备工具

运算符让我们可以进行数学运算或进行比较。

算术运算符

它们的操作就像你的计算器一样：
+ (加法)
- (减法)
* (乘法)
/ (除法)

比较运算符

它们会提出一个问题：“这是真的吗？”
== (等于？) — 注意是两个等号！
!= (不等于？)
> (大于)
< (小于)

你知道吗？ 在 JavaScript 中，= 代表“把这个值放进盒子里”，但 == 代表“检查这两样东西是否相同”。

4. 控制结构 (做决策)

有时候，我们只希望程序代码在特定条件成立时才执行。

IF 语句

这就像路口的“岔路”。
例子： IF 用户年龄为 18 岁或以上，THEN 显示“立即投票”按钮。ELSE，显示“未成年”。

循环 (For 与 While)

循环 (loop) 告诉计算机重复执行某个动作。
FOR 循环用于你知道要重复多少次时（例如：“打印这句话 10 次”）。
WHILE 循环用于只要某个条件为真，就一直执行（例如：“当『播放』按钮为开启时，持续播放音乐”）。

记忆小撇步： IF 是选择题。LOOP 是一个圆圈。

5. 函数与事件

函数 (function) 是一段设计用来执行特定任务的程序代码块。当你需要时，可以随时“调用”它。

通过事件 (Events) 触发动作

JavaScript 会“倾听”用户做了什么，这些动作称为事件 (Events)。

  • onclick： 当用户点击元素（如按钮）时发生。
  • onmouseover： 当鼠标指针移到图片或文本上方时发生。
  • onmouseout： 当鼠标指针离开该区域时发生。

图片变换范例步骤：
1. 使用 onmouseover 将图片来源切换为“高亮”版本。
2. 使用 onmouseout 将图片来源切回“原始”版本。
3. 这创造了“鼠标悬停”效果，让网页更有灵活的响应感！

重点总结： 事件是触发器，而函数则是触发后执行的动作。

6. 表单验证 (Form Validation)

这是课程纲要中 JavaScript 最重要的应用之一。它的作用是在数据传送到服务器“之前”进行检查。

常见的验证检查：
  • 存在性检查 (Presence Check)： 输入框是否留空了？
  • 长度检查 (Length Check)： 密码是否足够长？
  • 范围检查 (Range Check)： 年龄是否在 1 到 120 之间？
  • 类型检查 (Type Check)： 是否在应该输入文本的地方输入了数字？

为什么要这样做？ 这可以节省时间！比起把数据传送给服务器，再等待服务器传回错误信息，直接在屏幕上立即告诉用户“你忘记输入电子邮件”要快得多。

快速回顾： 使用 JavaScript 在客户端验证表单，可以优化用户体验并减少服务器负载。

总结清单

如果刚开始觉得有些复杂，别担心！程序设计是一门新语言。只要记住这些基础：
- 客户端 (Client-side) = 在浏览器中执行。
- 变量 (Variables) = 数据容器（字符串、整数、浮点数、布尔值）。
- IF 语句 (IF Statements) = 决策判断。
- 循环 (Loops) = 重复任务。
- 事件 (Events) = 触发器，如 onclick 或 onmouseover。
- 验证 (Validation) = 在提交前检查错误。

你一定做得到的！持续练习逻辑，程序代码自然会写得越来越顺手。