正在加载...

HTML 中的 JavaScript

上一课 无障碍 用结构让页面可用。JavaScript 在 HTML 之上加行为：点击、更新文字、与服务器通信。本课停在 HTML 侧：页面如何用 <script> 加载脚本——不是完整的 JavaScript 语言课。

为什么脚本加载重要

浏览器先绘制 HTML。脚本可能拖慢、因错误路径静默失败，或把本该在标记里的内容藏起来。知道 <script> 放哪、何时用 src、什么属于 HTML，能让页面诚实：内容可读、控件在场、行为可选。上一课的无障碍习惯仍然适用。

直接回答

1) 小片段用 <script>…</script>，外部文件用 <script src="app.js"></script>。2) 逻辑变长时优先外部 .js。3) 许多人把脚本放在 body 末尾附近。4) 有意义的文字和控件留在 HTML。5) 现代应用可能用 type="module"。6) 本课只讲嵌入。

📊 Script wiring beginners use

Choice What it does Beginner tip
Inline script Code sits between script tags Fine for tiny demos; hard to reuse
External src Loads a .js file from a path Prefer as projects grow
End of body Script runs after markup above it Content can paint sooner
Behavior on HTML JS finds elements by id/selectors Elements must exist in the page
Content in HTML Text and controls stay in markup Page still makes sense if JS fails
Modules later type=module for modern apps Skip until you study JS deeply

带真实按钮的内联脚本

小页面：带 id 的真实 <button>，再加监听点击并改文字的 <script>。标记仍可访问；脚本只加行为。

Inline button click

html 
<button id="hi" type="button">Say hi</button>
<script>
document.getElementById("hi").addEventListener("click", function () {
document.getElementById("hi").textContent = "Hello!";
});
</script>

阅读内联示例

  • 按钮是真实 HTML——没有 JS 也有意义
  • id 给脚本稳定挂钩
  • script 块里是几行内联 JS
  • addEventListener 接线行为，不替换按钮
  • 脚本不跑仍是「Say hi」
  • 上一课是结构；这里是接行为

带 src 的外部脚本

同一想法用独立文件更好扩展。HTML 只声明路径；逻辑在 app.js。路径须与文件夹一致。

External script src

html 
<button id="hi" type="button">Say hi</button>
<script src="app.js"></script>

阅读外部模式

  • src 让浏览器拉取并运行文件
  • HTML 保持简短；行为改在共享 .js
  • 路径错则不加载——检查 Network
  • 脚本放在按钮之后或等待元素
  • 优于巨大内联块
  • 后续仍是 HTML 课；深入 JS 另开课程

如何加载行为

  • 极小演示：控件旁内联即可
  • 会复用或会变大：移到 app.js 并用 src
  • 关键文字/导航：先 HTML，再 JS 增强
  • 感觉坏了：先查 src 路径
  • 无障碍：保留 button/a/label——不要可点 div
  • 完整语言学：循环与框架留给 JS 课

练习——HTML 加载脚本

  1. 复制内联示例；点击确认文字变化。
  2. 把监听移到 app.js，改用 src，再确认。
  3. 弄坏路径（wrong.js）；按钮仍是「Say hi」。
  4. 完全去掉脚本；HTML 仍说得通。
  5. 第二个新 id 按钮再接一个监听。
  6. 一句：HTML 拥有内容与结构；script 加载可选行为。
  7. 下一课：简短 HTML 总结。

易错点

  • 关键句子只写在 JavaScript 里
  • src 拼写错误或文件夹错
  • 难以维护的巨大内联脚本
  • 元素尚未存在就运行脚本
  • 用可点 div 替换可访问按钮
  • 把本课当成完整 JS 课程
  • 忘记无障碍习惯

小结

  • script 把 JavaScript 加载进 HTML 页面
  • 小演示用内联；变大时用 src 外部 .js
  • 合理放置脚本，让内容先出现并保持可用
  • 把真实内容与可访问控件留在 HTML
  • 无障碍是结构；本课是行为接线
  • 下一课：到目前为止的简短 HTML 总结

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
5
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 58 的 68
Html 教程