Understanding the functions of Javascript

简介：让你的网页「活」起来！

欢迎来到第二单元！到目前为止，你已经学过 HTML 如何提供网页的「骨架」，以及 CSS 如何为网页添加「皮肤」或样式。现在，是时候为它加上「大脑」了——这就是 JavaScript。JavaScript 是一种能增加互动性和响应能力的程序语言。没有它，网站就像印刷海报一样静态。有了 JavaScript，我们可以建立图片库、验证表单，并对使用者的每一次点击或按键做出反应。如果程序编写起初看起来有点吓人，请别担心；我们会一步一步地为你拆解！

9.1 文档对象模型 (DOM)

为了改变网页上的任何内容，JavaScript 需要一种与 HTML「沟通」的方式。它就是通过 文档对象模型 (DOM) 来实现这一点的。

什么是 DOM？

你可以把 DOM 想像成 HTML 文档的地图或族谱。当浏览器载入你的页面时，它会建立这张地图。JavaScript 可以利用 DOM 来执行以下操作：

• 存取 内容（例如读取使用者在方框中输入的文字）。
• 更新 内容（例如在不重新整理页面的情况下更改标题文字）。
• 变更样式（例如点击按钮时让它变红）。

类比： 想像你的网页是一栋房子，DOM 就是电路图。而 JavaScript 就像遥控器，利用这些电路来控制灯光的开关！

快速回顾： DOM 是你的 JavaScript 代码与浏览器窗口之间的桥梁。

重点总结： JavaScript 使用 DOM 来实时选择、更改或移动页面上的元素。

9.2 正则表达式 (Regex)

你有没有试过在注册网站时，系统提示你「密码必须包含一个数字」？这通常就是透过 正则表达式 (Regular Expressions) 来处理的。

验证与模式比对

正则表达式 (Regular Expression)（或简称 Regex）是一串特殊的字符序列，用于形成搜索模式。我们使用它们进行 验证检查 (Validation checks)，以确保资料格式正确。

你需要了解 Regex 如何搜索以下内容：

• 字母： 寻找特定的大小写字符序列。
• 数字： 检查字段（如电话号码）是否包含数字。
• 标点符号与符号： 寻找电子邮件中的 "@" 等符号。
• 重复模式： 检查特定数量的数字，例如 5 位数的邮递区号。

记忆小撇步： 把 Regex 想像成「搜索与筛选」工具。如果输入内容符合该模式，资料就是有效的！

重点总结： 正则表达式 用于透过比对字母、数字和符号的模式来验证使用者输入。

9.3 程序化功能

这是程序编写的核心。要让网页能够「执行」某些功能，你需要掌握代码的基本建构块。

将 JavaScript 加入页面

你可以使用 <script> 标签将 JavaScript 加入 HTML。通常，这会放置在 HTML 文件的底部，这样页面就能先载入其内容。

程序编写核心概念

• 变量 (Variables)： 用于存储资料的容器。把它们想像成贴了标签的盒子，用来存放信息。
• 赋值 (Assignment)： 使用 = 符号将值放入变量中。例如：let score = 10;
• 注释 (Comments)： 给人类看的笔记，电脑会忽略这些内容。在 JavaScript 中，我们用 // 来标注单行注释。
• 资料结构 (Data Structures)：
  一维数组 (1D Array)： 单一的项目列表，例如购物清单：\( [ "牛奶", "面包", "鸡蛋" ] \)。
  二维数组 (2D Array)： 列表的列表，例如带有行列的电影院座位表。
• 选择 (Selection)： 使用 if 陈述式来做决定。例如：如果使用者已登入，显示「登出」按钮。
• 重复与迭代 (Repetition and Iteration)： 使用 循环 (loops)（如 for 或 while）来重复执行任务，例如检查列表中的每一个项目。
• 子程序 (Subprograms/Functions)： 专门执行特定任务的代码区块。当你需要执行该任务时，只需「呼叫 (call)」该函数即可。
• 面向对象 (Object Orientation)： 一种透过将资料和行为分组为「对象」来组织代码的方式。

你知道吗？ 二维资料结构 基本上就是一张表格！如果你会用电子表格，你就能理解二维数组。

重点总结： 像 选择（决策）和 迭代（循环）这样的逻辑结构，让 JavaScript 能够自动处理复杂任务。

9.3.3 理解事件 (Events)

JavaScript 不会随机执行，它是在等待 事件 (Events) 发生。事件是指在浏览器中发生的某个动作。

常见事件类型：

• 使用者界面 (UI) 事件： 例如页面载入完成。
• 键盘事件： 例如 keydown（当使用者按下按键时）。
• 鼠标事件： 例如 click（点击）或 mouseover（悬停）。
• 焦点与模糊事件 (Focus and Blur)： Focus 是指点击文字框内部；Blur 是指点击离开文字框。
• 表单事件： 例如 submit，当使用者点击表单的「传送」按钮时触发。

快速回顾：
动作 -> 事件 -> 函数
（使用者点击）->（触发点击事件）->（JavaScript 执行代码）

9.3.4 结合 JavaScript、HTML 与 CSS

当这三者共同运作时，你可以建立互动式的 组件 (components)。课程大纲要求你了解如何建立：

• 幻灯片 (Slideshows)： 循环播放图片。
• 模态窗口与图片 (Modal Boxes and Images)： 在内容之上显示的弹出式窗口。
• 筛选与排序列表 (Filter and Sort Lists)： 组织资料（例如将价格由低到高排序）。
• 弹出窗口 (Pop-ups)： 小型警告窗口。
• 标签页内容 (Tabbed Content)： 在不离开页面的情况下切换不同区块的内容。

逻辑步骤： 要制作 模态窗口，JavaScript 会在按钮被点击时，将 CSS 的 display 属性从 "none"（隐藏）更改为 "block"（可见）。

9.3.5 错误处理与调试 (Debugging)

如果你的代码第一次没有成功执行，请别担心——即使是专业开发人员，大部分时间也都在修正错误！这个过程称为 调试 (debugging)。

常见的错误类型：

• 语法错误 (Syntax Errors)： 代码中的拼写错误（例如忘记打括号）。
• 逻辑错误 (Logic Errors)： 代码可以执行，但执行结果不正确（例如本该相减却变成了相加）。

如何处理错误：
你可以使用 错误处理 (error handling) 技术（例如 try...catch 区块），以防止网站因发生问题而当机。使用浏览器开发者工具（按 F12）是找出并「调试」这些问题的最佳方法。

重点总结： 调试 是寻找并修正错误的过程，而 错误处理 则能帮助程序优雅地处理意料之外的问题。