JavaScript 在哪

JavaScript 代码位于 HTML 文档的 <script> 标签内或者通过 <script> 标签引入外部的 JavaScript 文件中。

JavaScript 代码位于 HTML 文档的 <script> 标签内或者通过 <script> 标签引入外部的 JavaScript 文件中。

JavaScript 代码一般存在于 HTML 文档的以下几个位置：

  • <head> 片段中的 <script> 标签内
  • <body> 片段中的 <script> 标签内
  • 在 <head> 片段中引入 .js 文件
  • 在 <body> 片段中引入 .js 文件

<script> 标签

在 HTML 中，JavaScript 代码插入在 <script> 和 </script> 标签之间。

<script>
  document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

老式的写法包含 type 属性: <script type="text/javascript">，现在已经不需要了， 因为 JavaScript 是 HTML 中的默认脚本语言。

JavaScript 函数和事件

JavaScript 函数是一段 JavaScript 代码，可以在“调用”时执行。

例如，可以将函数绑定到某个事件上，那么在触发事件时会调用相应的函数，比如用的点击、双击、键盘按下等事件。

<script>
  function popupAlert() {
    alert("Hello World");
  }
</script>

<button onclick="popupAlert()">点我</button>

在后面的章节中会有更多关于函数和事件的内容。

<head> 和 <body> 中的 JavaScript

JavaScript 脚本可以放在 HTML 页面的 <body> 或者 <head> 部分。一个 HTML 文档中可以包含任意多个脚本。

在此示例中，JavaScript 脚本位于 HTML 页面的 <head> 部分中。

位于 <head> 部分的 JavaScript 代码：

<!DOCTYPE html>
<html>
  <head>
    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "Paragraph changed.";
      }
    </script>
  </head>
  <body>
    <h1>A Web Page</h1>
    <p id="demo">A Paragraph</p>
    <button type="button" onclick="myFunction()">Try it</button>
  </body>
</html>

位于 <body> 部分的 JavaScript 代码：

<!DOCTYPE html>
<html>
  <body>
    <h1>A Web Page</h1>
    <p id="demo">A Paragraph</p>
    <button type="button" onclick="myFunction()">Try it</button>

    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "Paragraph changed.";
      }
    </script>
  </body>
</html>

!! 将脚本放在 <body> 元素的底部可以提高页面加载速度，因为脚本解释会减慢显示速度。

外部 JavaScript 文件

脚本也可以放在外部文件中，文件的后缀名是 .js。同一个脚本文件可以在多个 HTML 文件中共用。

<script> 元素的 src (source) 属性中设置脚本文件的 URL，浏览器会自动将脚本文件加载进来。

外部文件：myScript.js

function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

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

引入脚本文件的 <script> 标签同样既可以位于 <head> 也可以位于 <body> 中。

同一个 HTML 文件可以引入任意多个外部 JavaScript 文件。 一个 <script> 标签中只能引入一个文件。

JavaScript 文件的路径既可以是绝对路径，也可以是相对路径。关于文件路径，可以参考 HTML 文件路径获取更多的信息。

外部 JavaScript 优势

将 JavaScript 脚本放在外部文件中有一些优点：

  • 它将 HTML 和 JavaScript 代码分开
  • 它使 HTML 和 JavaScript 更易于阅读和维护
  • 缓存的 JavaScript 文件可以加快页面加载速度
JavaScript 基础 JavaScript 输出