一、知识回顾（读完直接做下面的实践题）#

1. Web 标准的三个组成部分：HTML 负责网页的结构（页面元素和内容）、CSS 负责网页的表现（外观、位置等页面样式，如颜色、大小）、JavaScript 负责网页的行为（交互效果）；大部分标准由 W3C（World Wide Web Consortium，万维网联盟）制定
2. JavaScript（简称 JS）是一门跨平台、面向对象的脚本语言，用来控制网页行为、实现页面的交互效果；它和 Java 是完全不同的语言（概念和设计都不同），只是基础语法类似
3. JS 的三大组成：ECMAScript 规定基础语法核心知识（变量、数据类型、流程控制、函数、对象等）、BOM（浏览器对象模型）操作浏览器本身（页面弹窗、地址栏操作、关闭窗口等）、DOM（文档对象模型）操作 HTML 文档（改变标签内的内容、标签内的字体样式等）
4. ECMA 国际（前身为欧洲计算机制造商协会）制定了标准化的脚本程序设计语言 ECMAScript，JavaScript 遵守这个标准，ES2024 是最新版本
5. 内部脚本：JS 代码必须位于 <script></script> 标签之间；HTML 文档里可以任意地方放任意数量的 <script>；一般把脚本放在 <body> 元素的底部，可改善显示速度
6. 外部脚本：JS 代码单独写在 .js 文件里，HTML 里用 <script src="js/demo.js"></script> 引入；src 的路径写法与 <img> 的 src 一样
7. 外部脚本的两个坑：引入外部脚本的 <script> 标签里再写 JS 代码会被忽略；这个标签必须成对闭合，不能像 <img> 那样自闭合
8. 行内脚本（补充了解）：把 JS 写进标签的事件属性里（如 onclick="alert('hi')"）；结构和行为混在一起，不推荐
9. JS 书写规范：每行结尾以分号结尾，结尾分号可有可无（课程代码统一都写了分号）
10. 脚本放 body 底部的原因：页面从上往下逐行解析，内容先渲染出来、脚本后执行，用户不用等脚本跑完才看到页面；多段脚本按在页面里出现的先后顺序执行

二、裸写题#

• 2-1 用内部脚本让页面弹出一句话 写一个 HTML 页面，页面里有一行标题，然后在页面主体的底部加一段内部脚本：打开页面时弹出一个警告框，内容是 Hello JS。 写完自己回答一句：为什么不放在 head 里？ （练习文件 test_13_内部脚本.html 里已经给了骨架和写作区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：JS 代码要包在一个专门的标签里；“弹出警告框”是脚本里的一行代码 二级 · 方法：用 <script> 标签包住 JS 代码；弹窗用 alert('内容') 三级 · 骨架：<body> → 页面内容 → <____>alert('____');</____> → </body>

  参考答案（做完再点开）

  1
  <!DOCTYPE html>
  2
  <html lang="zh-CN">
  3
  <head>
  4
    <meta charset="UTF-8">
  5
    <title>内部脚本</title>
  6
  </head>
  7
  <body>
  8
    <h1>JS 引入方式 - 内部脚本</h1>
  9
  
  10
    <!-- 内部脚本：放在 body 底部 -->
  11
    <script>
  12
      alert('Hello JS'); // 弹出一个警告框
  13
    </script>
  14
  </body>
  15
  </html>

  显示更多显示更少

  对照课程 01. JS-引入方式.html：课程里这段是被注释掉的（注释符 <!-- --> 包住了整个 <script> 标签），拆开注释就能看到弹窗。放 body 底部的原因：浏览器从上往下解析，页面内容先显示出来、脚本再执行，用户不用干等。

• 2-2 把弹窗代码拆到外部 JS 文件里 要求做两件事：

  1. 新建一个 JS 文件，里面只写一句弹窗代码，内容是 Hello JavaScript
  2. 新建一个 HTML 页面，用外部脚本的方式把它引入进来——这个页面里不出现任何 JS 代码 写完后双击 HTML 文件，应该看到弹窗；再把 JS 文件里的文字改一下、刷新页面，验证”改一处、页面就变”。 （练习文件 test_13_外部脚本.html 和 test_13_外部脚本.js，两个文件放在同一目录。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：JS 代码住在 .js 文件里，HTML 只负责”把它叫过来” 二级 · 方法：引入用 <script src="文件路径"></script>，路径是相对路径，和引入图片一样 三级 · 骨架：JS 文件里 alert('____');；HTML 里 <script ____="____.js"></script>

  参考答案（做完再点开）

  test_13_外部脚本.js：

  1
  alert('Hello JavaScript');

  test_13_外部脚本.html：

  1
  <!DOCTYPE html>
  2
  <html lang="zh-CN">
  3
  <head>
  4
    <meta charset="UTF-8">
  5
    <title>外部脚本</title>
  6
  </head>
  7
  <body>
  8
    <h1>JS 引入方式 - 外部脚本</h1>
  9
  
  10
    <!-- 外部脚本：src 写 JS 文件的路径（同目录直接写文件名） -->
  11
    <script src="test_13_外部脚本.js"></script>
  12
  </body>
  13
  </html>

  对照课程 01. JS-引入方式.html + js/demo.js：课程把 JS 文件放在 js/ 目录下，所以写 src="js/demo.js"；这里两个文件同目录，所以直接写文件名。注意 <script src="..."> 要成对闭合，标签里不能写代码。

• 2-3 找出下面这段代码里引入方式的问题并改对

  1
  <html>
  2
  <head>
  3
    <title>JS引入方式</title>
  4
    <script>
  5
      alert('头部脚本');
  6
    </script>
  7
  </head>
  8
  <body>
  9
    <h1>Hello JS</h1>
  10
    <script src="js/demo.js" />
  11
    <script src="js/utils.js">
  12
      alert('这行代码会执行吗');
  13
    </script>
  14
  </body>
  15
  </html>

  显示更多显示更少

  要求：找出 2 处真错误和 1 处写法不推荐的地方，说明原因，并写出改正后的完整代码。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：想一想 <script> 是双标签还是单标签；外部脚本的标签里写代码会怎样；脚本一般推荐放在页面的什么位置 二级 · 方法：双标签要写结束标签；引入外部脚本的标签里不能写代码；内部脚本一般放 <body> 底部 三级 · 骨架：<script src="js/demo.js">____</script> / <script src="js/utils.js">____</script> / 内部脚本挪到 </body> 前面

  参考答案（做完再点开）

  ① 真错误：<script src="js/demo.js" /> 自闭合了。 <script> 是双标签，必须有结束标签，要写成 <script src="js/demo.js"></script>。 ② 真错误：<script src="js/utils.js"> 标签里又写了 JS 代码。 引入外部脚本时，标签内的代码会被浏览器忽略——alert('这行代码会执行吗') 永远不会执行；这行代码要写进 js/utils.js 文件里。 ③ 不推荐：内部脚本放在了 <head> 里。 语法上”任意地方”都能放，但放 head 里会在页面内容渲染之前就执行；一般放 body 底部。

  改正后：

  1
  <!DOCTYPE html>
  2
  <html lang="zh-CN">
  3
  <head>
  4
    <meta charset="UTF-8">
  5
    <title>JS引入方式</title>
  6
  </head>
  7
  <body>
  8
    <h1>Hello JS</h1>
  9
  
  10
    <!-- 外部脚本：双标签，必须写结束标签 -->
  11
    <script src="js/demo.js"></script>
  12
  
  13
    <!-- 外部脚本：标签里不写代码，代码写进 js/utils.js -->
  14
    <script src="js/utils.js"></script>
  15
  
  16
    <!-- 内部脚本：移到 body 底部 -->
  17
    <script>
  18
      alert('页面底部脚本');
  19
    </script>
  20
  </body>
  21
  </html>

  显示更多显示更少

三、综合题#

• 3-1 做一个”三种引入方式对照页” 把三种引入方式放进同一个页面，亲眼看看它们分别什么时候执行：

  1. 新建一个 JS 文件（和 HTML 同目录），里面弹出一句话：我是外部脚本
  2. 写 HTML 骨架，在 body 的最上面用外部脚本引入这个文件
  3. 接着写一行标题：三种 JS 引入方式
  4. 再放一个按钮，用行内方式实现：点它弹出 我是行内脚本
  5. 最后在 body 底部写一段内部脚本，弹出 我是内部脚本
  6. 保存后双击打开页面，观察并记录：哪一句话先弹出来？哪些要等你的操作才弹？（想一想这和”浏览器从上往下解析”有什么关系）
  7. 再回答一句：如果这三个地方都要用同一句弹窗代码，用哪种方式最省事？为什么？ （练习文件 test_13_综合_引入方式对照页.html 给了骨架和写作区；外部 JS 文件 test_13_综合_引入方式对照页.js 在同一目录。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：脚本的执行顺序 = 代码在页面里出现的顺序；行内方式还要多一个”用户操作”的条件 二级 · 方法：外部脚本 <script src="文件.js"></script>；行内 <button onclick="alert('...')">；内部 <script>alert('...')</script> 三级 · 骨架：<body> → <script src="____.js"></script> → <h1>____</h1> → <button ____="alert('我是行内脚本')">____</button> → <script>alert('____')</script> → </body>

  参考答案（做完再点开）

  test_13_综合_引入方式对照页.js：

  1
  alert('我是外部脚本');

  test_13_综合_引入方式对照页.html：

  1
  <!DOCTYPE html>
  2
  <html lang="zh-CN">
  3
  <head>
  4
    <meta charset="UTF-8">
  5
    <title>三种 JS 引入方式</title>
  6
  </head>
  7
  <body>
  8
    <!-- ① 外部脚本：放在 body 最上面，是最先执行的脚本 -->
  9
    <script src="test_13_综合_引入方式对照页.js"></script>
  10
  
  11
    <h1>三种 JS 引入方式</h1>
  12
  
  13
    <!-- ② 行内脚本：要等用户点击才执行 -->
  14
    <button onclick="alert('我是行内脚本')">点我一下</button>
  15
  
  16
    <!-- ③ 内部脚本：放在 body 底部，最后执行 -->
  17
    <script>
  18
      alert('我是内部脚本');
  19
    </script>
  20
  </body>
  21
  </html>

  显示更多显示更少

  第 6 步的答案：外部脚本先弹（它写在最上面），关掉它之后内部脚本接着弹（同一时刻按页面里的先后顺序执行）；行内脚本要等你点按钮才弹。第 7 步的答案：外部脚本——代码只写一份，多个页面都能引入，改一处全站生效；写两遍就要维护两个地方，早晚会漏改一个。