💻 主题 21：网页编程 (JavaScript)

欢迎来到 A Level 信息技术之旅的最后一个主题！这一章非常实用且令人兴奋，我们将重点学习如何让网站“动”起来。到目前为止，你可能已经用 HTML 构建了页面结构，并用 CSS 让它变得美观。但正是 JavaScript (JS) 为网页赋予了“大脑”，让它能够与用户进行交互。

先修知识： 我们假设你已经对 HTML（结构）和 CSS（样式）有很好的理解，正如早期课程（如 IGCSE 网站创作）所涵盖的那样。

让我们深入探讨如何使用 JavaScript 为你的网页注入活力吧！

21.1 使用 JavaScript 添加交互性

JavaScript 是一种高级的解释型脚本语言，主要用于客户端（即用户的浏览器）。它允许你在网页加载完成后，动态地改变网页的内容、样式和行为。

插入 JavaScript 的方法

你可以通过两种主要方式将 JS 代码添加到 HTML 文档中：

  1. 在 HTML 中插入 JavaScript（内部脚本）：
    你可以直接使用 <script> 标签将代码放在 HTML 中，通常放置在 <head> 标签内或 </body> 结束标签之前。这种方法适用于较短且特定的脚本。
  2. 创建并使用外部脚本：
    将 JS 代码写在一个独立的文件中（例如 script.js），并使用 <script src="script.js"></script> 标签将其链接到 HTML 中。这是大型项目的最佳实践，因为它使代码更易于组织、维护和复用。

要点总结： 将 JS 分离到外部文件中可以保持 HTML 代码整洁，并提高页面加载速度（因为脚本可以被浏览器缓存）。

操作 HTML 内容和样式 (DOM)

为了改变网页上的任何内容，JavaScript 需要与 文档对象模型 (DOM) 进行交互。你可以将 DOM 想象成一个代表页面上所有元素的树状结构。

要操作一个元素，首先需要定位它。定位单个元素最常用的方法是使用它的 ID：

document.getElementById(id)

定位成功后，你可以改变它的以下属性：

  1. 文本/数字内容：
    使用 innerHTML 属性来插入或更改目标元素内的文本或数字值。

    2. 示例： document.getElementById("greeting").innerHTML = "Hello World!";

  2. 计算与字符串处理：
    JS 可以执行计算并显示结果。它还可以进行字符串处理，例如连接文本（`concatenation`）。

    3. 示例： document.getElementById("output").innerHTML = 5 + 7;

  3. 样式 (CSS 属性)：
    你可以通过访问元素的 style 对象并修改其 CSS 属性（以驼峰命名法书写，例如 backgroundColor）来改变其外观。

    4. 语法： document.getElementById(id).style.property = new style

    示例： document.getElementById("btn1").style.color = "red";

  4. 图像和图像属性：
    你可以动态更改图像元素的来源 (`src`) 或大小。

    5. 示例： document.getElementById("photo").src = "new_image.jpg";

显示和隐藏 HTML 元素

这是交互性的一个基本方面，常用于菜单、弹窗或展开信息等功能。

  • 使用 style.visibility：
    设置 .style.visibility = "hidden" 会隐藏元素，但它在页面上仍会占据原来的空间。
  • 使用 style.display：
    设置 .style.display = "none" 会完全隐藏元素，且它占据的空间会被页面上的其他元素回收。
✅ 快速回顾：Visibility 与 Display

Visibility： 隐藏元素，但保留位置（就像一把隐形的椅子）。

Display： 隐藏元素并将其从布局流中移除（就像把椅子完全搬走）。这通常是让元素消失的首选方法。

显示数据与用户交互

JavaScript 提供了几种内置方法来显示输出并获取用户输入。

以不同方式显示数据
  1. 写入 HTML 元素（使用 innerHTML）：
    （如上所述）这是在页面结构内显示数据的标准、用户友好的方式。
  2. 写入 HTML 文档流（使用 document.write()）：
    这会直接写入文档流。警告：如果在页面完全加载后执行（例如在某个事件中），它通常会覆盖整个现有文档，删除当前所有内容！请谨慎使用。
  3. 警告框（使用 window.alert()）：
    这会显示一个带有消息和“确定”按钮的小型对话框。它会暂停程序执行，直到用户点击“确定”。

    4. 示例： window.alert("数据提交成功！");

  4. 浏览器控制台（使用 console.log()）：
    这会将输出写入浏览器的开发者控制台。这种方法对于调试 (debugging) 至关重要——它允许程序员在不影响网页可见内容的情况下检查变量值并确认代码块是否正在运行。
用户交互弹窗

这些弹窗允许简单的信息收集和用户的决策操作。

  • confirm()： 显示一个带有消息和两个按钮（“确定”和“取消”）的对话框。它返回一个布尔值（点击“确定”返回 true，点击“取消”返回 false）。

    • 类比： 询问“你确定要继续吗？”（是/否）。

  • prompt()： 显示一个对话框，要求用户输入一个值。它将用户的输入作为字符串返回，如果用户点击“取消”则返回 null。

    • 类比： 询问“你的名字是什么？”（一个文本输入框）。

响应常见的 HTML 事件

网页是事件驱动 (event-driven) 的。这意味着 JavaScript 代码仅在发生特定动作（即事件）时才会运行。你需要能够识别并使用以下常见的 HTML 事件：

  • onload： 当对象（如整个页面或图像）完成加载时触发。用途：在运行脚本之前确保所有页面元素都已准备就绪。
  • onchange： 当元素的值发生改变时触发（常用于输入框或下拉菜单）。
  • onclick： 当用户点击元素时触发（按钮最常用的事件）。
  • onmouseover： 当鼠标光标移动到元素上方时触发。
  • onmouseout： 当鼠标光标移出元素时触发。
  • onkeydown： 当元素（如输入框）获得焦点并按下键盘按键时触发。

你知道吗？ 使用事件可以使网页感觉具有交互性和即时性，这就是为什么 JS 对于现代用户体验如此重要的原因。

JavaScript 代码的结构与语法

要编写功能性 JS，必须了解其基本组成部分。

JavaScript 语句

JavaScript 语句 是浏览器要执行的一条指令。语句以分号 (;) 分隔。

  • 值（字面量和变量）：
    值是 JS 处理的数据。字面量 (Literals) 是固定值（例如 10.5, "Text", true）。变量 (Variables) 用于存储数据值（例如 let score = 50;）。
  • 关键字：
    JS 中保留用于特定功能的字词（例如 let, if, function, for）。你不能将关键字用作变量名。
  • 表达式：
    值、变量和运算符的组合，计算后得出一个单一的值。示例： 5 * (x + 2)
数据类型与类型转换

你必须了解以下基本数据类型：

  • number： 用于整数和浮点数。
  • string： 用于文本（用引号括起来）。
  • Boolean： 存储 true 或 false。
  • array： 用于在单个变量中存储多个值（例如 let colours = ["red", "blue", "green"]）。
  • object： 用于存储命名值的集合（例如 let person = {name: "Ali", age: 18}）。

类型转换： JavaScript 是弱类型语言，这意味着变量可以更改类型，且解释器通常会执行自动类型转换（强制转换）。你应该意识到这一点，特别是在对可能被读取为 string 的输入数据进行数学运算时。

运算符（JS 的计算器）

运算符用于对值和变量执行操作。

  • 赋值运算符： 用于给变量赋值（例如 x = 5, x += 2）。
  • 算术运算符： 标准数学运算（+, -, *, /, %（取模，即求余数））。
  • 代数运算符： 与算术运算符类似，用于表达式中。
  • 字符串运算符： 主要是加号运算符 (+)，用于字符串拼接。
  • 逻辑运算符： 用于确定变量或值之间的逻辑关系。
    • AND (&&)：如果两个语句都为真，则为真。
    • OR (||)：如果至少有一个语句为真，则为真。
    • NOT (!)：颠倒逻辑状态。
  • 比较运算符（逻辑、条件、类型）： 用于条件测试（如 if 语句或循环），检查相等性或关系。
    • ==（等于）：仅比较值。（常见错误："5" == 5 为真）
    • ===（严格等于）：比较值和类型。（"5" === 5 为假）
    • !=（不等于）
    • !==（严格不等于）
    • >（大于）, <（小于）, >=（大于等于）, <=（小于等于）
⚠ 常见错误警告

除非你特别打算忽略数据类型，否则请始终在 JavaScript 中使用 ===（三等号）。三等号可以防止因自动类型转换导致的意外行为！

控制流、函数与定时

为了让程序变得有用，它需要能够进行判断并重复动作。

条件运算符与流程控制

这些运算符允许根据条件的真假来执行代码块。

  • if, else, else if： 用于决策。JS 也支持三元运算符（简单 if...else 语句的快捷方式）。

    • 示例： if (score >= 90) { grade = 'A'; } else { grade = 'B'; }

  • switch： 用于将变量与许多不同的可能值（case）进行测试。
JavaScript 循环（迭代方法）

循环允许代码块被重复执行（迭代）。

  1. for 循环： 当你确切知道代码要重复多少次时使用。

    结构： for (初始化; 条件; 增量) { 代码... }

  2. for/in 循环： 用于遍历对象的属性。
  3. while 循环： 当迭代次数未知时使用；只要指定条件为真，循环就会继续。
  4. do/while 循环： 与 while 循环类似，但代码块在测试条件前至少执行一次。

break 语句可以用在任何循环或 switch 代码块中，以立即退出该结构。

函数

函数 是为执行特定任务而设计的代码块。函数是结构化编程的基础，可以避免重复代码。

函数可以通过以下三种方式执行：

  1. 事件发生时（例如 onclick）。
  2. 从其他代码调用（执行）时（例如被另一个函数调用）。
  3. 页面加载时自动调用（自调用），通常是在定义函数后立即在括号内执行。
JavaScript 定时事件

定时事件允许你按时间安排函数的执行，增加响应感或延迟效果。

  • setTimeout()： 在指定的毫秒数 (ms) 后执行函数一次。

    用途： 表单提交后 3 秒显示“感谢”消息。

  • setInterval()： 重复执行函数，从指定的时间间隔 (ms) 后开始。

    用途： 创建每 1000ms（1 秒）更新一次的时钟。

注释 JavaScript 代码

注释 是代码中不可执行的文本，用于解释其目的或功能。它们对于代码的可读性至关重要，特别是在团队协作或事后复习自己的代码时。

  • 单行注释： 以 // 开头
  • 多行注释： 以 /* 开头，并以 */ 结尾

🚀 实战要点（Paper 4 备考建议）

在 Paper 4 中，你通常需要编写一个函数来执行计算，使用 document.getElementById() 修改元素的样式或内容，然后将该函数链接到用户事件（如 onclick 或 onchange）。请反复练习这一流程，直到它成为你的肌肉记忆！