前端Wiki/JavaScript/基础/初识 JavaScript

三种引入方式

JS 代码要写进网页才能执行，常见有三种引入方式。

内联方式：写在标签的 onclick 等属性里，只适合临时测试，正式项目不要用；
内部脚本：写在 <script> 标签中间，适合小型演示页面；
外部文件：代码放在单独的 .js 文件里，用 <script src="..."> 引入，是最推荐的方式。

外部方式有三个好处：HTML 与 JS 职责分离、浏览器可以缓存文件、多个页面能共用同一段代码。另外，script 标签要么放在 body 末尾，要么加上 defer 属性，避免「元素还没加载完脚本就执行」的报错。

本节要点优先用外部文件引入 JS；script 默认同步阻塞解析，放 body 末尾或加 defer 可以避免找不到元素的报错。

HTML

<p id="tip">页面还没有被脚本修改。</p>
<script>
  // 内部脚本：直接写在 HTML 里
  const tip = document.getElementById('tip');
  tip.textContent = '这段文字由内部脚本修改。';
  console.log('内部脚本已执行');
</script>
<!-- 外部方式：把代码放进 main.js，再用下面这行引入 -->
<!-- <script src="main.js"></script> -->
<!-- 加 defer 后脚本会在 HTML 解析完后再执行 -->
<!-- <script src="main.js" defer></script> -->

🔗 相关词条HTML 浏览器 JS 网页标签元素同步

📚 推荐阅读

十大经典排序算法万象云档

阮一峰《TypeScript 教程》万象云档

IndexedDB API 3.0万象云档

Socket.IO v4 中文文档万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读