单元 2：理解 Javascript 的功能
你好，未来的 Web 开发者！
欢迎来到这个至关重要的章节！我们将深入探讨 Javascript (JS)，这门为静态网页带来生命、活力和智能的语言。如果说 HTML 是结构，CSS 是设计，那么 JS 就是电流和大脑！
如果脚本语言一开始看起来有点复杂，请别担心；我们将把 Javascript 的基本功能拆解为简单易懂的部分。读完本节后，你将清楚地理解 JS 的作用，以及它在现代 Web 开发中为何不可或缺。
第 1 节：Javascript 在 Web 三剑客中的角色
什么是 Javascript？（预备知识检查）
网站通常由三种核心技术构建。要理解 JS，我们必须简要回顾一下它的伙伴：
- HTML (超文本标记语言)： 定义结构（标题、段落、图像、链接）。可以把它想象成房子的骨架。
- CSS (层叠样式表)： 定义外观（颜色、字体、布局、间距）。这是房子的室内装修和油漆。
- Javascript (JS)： 定义行为和交互。这是使房子能够正常运转的电力、管道和自动化系统。
你知道吗？
JS 主要是一种 客户端脚本语言。这意味着代码直接在用户的 Web 浏览器（客户端）中运行，而不是在托管网站的服务器上运行。这使得交互能够瞬间完成！
核心总结： Javascript 是网页的“大脑”，负责处理动态内容并对用户的操作做出响应。
第 2 节：Javascript 的核心功能
2.1 功能：客户端交互
Javascript 最直观的功能是在无需重新加载整个页面的情况下实现交互。它将一个静态文档转换成了一个动态应用程序。
JS 如何实现交互（让网页动起来！）
- 动态内容更新： 根据特定条件更改文本或图像。（例如：根据一天中的不同时间显示不同的欢迎语。）
- 交互式元素： 创建幻灯片、动画过渡或悬停效果，以显示隐藏信息。
- 用户反馈： 在用户执行操作（如将商品添加到购物车）后，立即显示警报或提示信息。
类比：遥控器
想象一下，HTML 是电视机，CSS 是屏幕的边框和色彩。Javascript 就是遥控器——它允许你切换频道、调节音量、访问菜单，而无需物理上重新连接整个电视机。
2.2 功能：事件处理
网站要实现交互，必须能够识别并响应事件。事件 (Event) 是指网页元素上发生的任何事情。
分步事件处理过程
Javascript 充当网站的观察者和指挥官，遵循三个步骤：
- 监听： JS 不断地“监听”用户或浏览器触发的特定事件。
- 识别事件： 常见的事件包括：click（按下鼠标按钮）、mouseover（鼠标指针移到元素上方）、keypress（按下一个键）或 load（页面加载完成）。
- 响应（执行函数）： 当特定事件发生时，JS 会执行预先编写的代码块，即 函数 (Function)，来执行动作。
核心术语： JS 中的 函数 就是一段旨在执行特定任务的可重用代码块。
需要避免的常见错误
学生有时会混淆 事件（触发器）和 函数（动作）。请记住：click 是事件；而隐藏菜单则是该事件触发的函数。
2.3 功能：DOM 操作
这是 Javascript 最强大的功能之一。要理解 JS 如何更改网页，你必须理解 DOM。
理解文档对象模型 (DOM)
DOM 是 HTML 和 XML 文档的编程接口。它将网页表示为一种结构，使得程序（如 Javascript）能够改变文档的结构、样式和内容。
- 把 HTML 页面想象成一棵家谱树。<html> 标签是祖辈，<body> 和 <head> 是子辈，而 <p> 或 <img> 标签则是孙辈。
- DOM 为 Javascript 提供了一种遍历这棵树的结构。
JS 如何通过 DOM 进行操作：
通过操纵 DOM，Javascript 可以：
- 更改元素： 更新段落内的文本（例如，将状态从“离线”改为“在线”）。
- 更改属性： 修改图像的源路径 (
src) 或超链接的地址 (href)。 - 更改样式（通过 CSS）： 直接改变元素的颜色、大小或可见性。
- 添加或删除元素： 从页面中彻底移除某个元素，或者生成一个新元素（例如在购物车中添加新的一行）。
快速复习： JS 使用 DOM 结构来定位网页的特定部分并对其进行动态修改。
2.4 功能：输入验证
Javascript 的一个关键安全和可用性功能是在数据被发送到服务器 之前 检查表单中的用户输入。这被称为 客户端验证 (Client-side validation)。
为什么客户端验证很重要？
- 速度和效率： 它能为用户提供即时反馈。如果用户忘记输入电子邮件，JS 可以立即提醒他们，而无需等待服务器处理请求。
- 降低服务器负载： 它阻止了不必要的请求发往服务器，从而节省了带宽和服务器的处理能力。
- 增强用户体验： 用户会很感激这种纠错时的即时指导。
JS 验证什么？
JS 函数常用于检查以下约束：
- 该字段是否为 空？（必填字段）
- 输入格式是否 正确？（电子邮件地址是否包含“@”和“.”）
- 密码是否满足 最低要求？（长度、是否包含数字/符号）
- 两个字段是否 匹配？（确认密码字段）
给学习遇到困难的同学的小提醒：
虽然客户端验证对用户体验非常友好，但它 不足以保障安全。攻击者可以轻易绕过客户端的 JS 验证。因此，服务器端验证 仍然是绝对必要的，以确保数据完整性和安全性，但该过程是在 JS 完成其客户端工作 *之后* 才进行的。
记忆助手： JS 是 Web 的 V.I.P.：Validation（验证）、Interactivity（交互）、Page Manipulation（页面 DOM 操作）。
第 3 节：应用与功能的总结
我们在现实生活中哪里能看到 JS 的功能？
你每次使用现代网站时，都在享受 Javascript 核心功能带来的便利：
- 购物车： 当你点击“添加到购物车”时，JS 会立即更新小购物车图标上的数字（DOM 操作），并确认商品已添加（交互/事件处理）。
- 搜索筛选器： 当你选择价格范围或类别时，显示的搜索结果会随之更改，而无需整个页面刷新或重新加载（DOM 操作）。
- 在线表单（注册/登录）： 当你输入密码格式错误时，JS 会在你点击提交之前立即显示红色错误消息（输入验证）。
- 图片库： 点击缩略图以显示更大尺寸的图片（事件处理）。
快速复习框：Javascript 的主要功能
JS 提供 客户端脚本 以实现：
- 启用 交互性（动态更改）。
- 处理 事件（响应点击/操作）。
- DOM 操作（更改页面的结构、内容和样式）。
- 输入验证（在本地检查表单数据）。
恭喜你！现在你已经打下了坚实的基础，理解了为什么 Javascript 对互联网的功能如此重要。请继续练习这些定义！