Client-Side JavaScript: with HTML使用 HTML 的客户端 JavaScript

---

学习目标

观看本视频后，您将能够：

• 定义 客户端脚本 的概念。
• 列举 客户端脚本 的使用场景。
• 解释如何使用 <noscript> 标签 提供替代内容。
• 描述脚本中的 事件绑定 (Event Binding)。
  

---

什么是客户端脚本？

定义

客户端脚本是伴随 HTML 文档运行的小程序，可以嵌入 HTML 文档中或与之分离。

• 运行时机：
  • 文档加载时。
  • 用户与页面交互时，例如点击链接或按钮时。

常见脚本语言

尽管 JavaScript 是 HTML 中最常用的脚本语言，但其他脚本语言也可以使用。

---

客户端脚本的功能与应用

功能

1. 增强交互性：
   • 动态修改 HTML 页面内容。
   • 增强用户体验。
2. 表单验证：
   • 确保用户输入的有效性。
3. 事件驱动：
   • 响应用户点击、鼠标悬停等操作。
4. 动态生成内容：
   • 在 HTML 页面上创建新的文档元素。

---

使用场景示例

---

如何添加脚本

1. 内联脚本

在 HTML 文档中直接插入脚本：

<script>
  alert("欢迎访问页面！");
</script>

适用于简短的脚本。

---

2. 引用外部脚本

通过 src 属性引入外部脚本文件：

<script src="scripts.js"></script>

• 优点：
  • 代码复用。
  • 减少 HTML 文档的复杂度。
  • 可以引入外部 JavaScript 库，如 jQuery。

---

<noscript>标签

定义

当浏览器禁用脚本或不支持脚本时，<noscript> 标签中的内容将被显示。

示例：

<noscript>
  <p>您的浏览器不支持脚本功能，请启用 JavaScript。</p>
</noscript>

---

事件绑定 (Event Binding)

什么是事件绑定？

事件绑定是指在指定事件发生时，调用相关函数。

常见事件

---

事件处理函数

示例：按钮点击事件

<button onclick="showAnswers()">显示答案</button>
<script>
  function showAnswers() {
    alert("这是答案！");
  }
</script>

• onclick 事件：当用户点击按钮时，执行 showAnswers() 函数。
• 事件处理函数：定义点击后执行的逻辑。

---

总结

通过学习这些知识，您可以更好地利用客户端脚本提高网页的动态性与用户体验！ 🚀