JavaScript 位置
<script> 标签
在 HTML 中，JavaScript 代码插入在 <script> 和 </script> 标签之间。
旧的 JavaScript 示例可能会使用 type 属性：<script type="text/javascript">。
type 属性不是必需的。JavaScript 是 HTML 中默认的脚本语言。
JavaScript 函数和事件
JavaScript 函数是一段 JavaScript 代码块，可以在“调用”时执行。
例如，当发生事件时，例如用户点击按钮时，可以调用函数。
您将在后面的章节中学习更多关于函数和事件的知识。
<head> 或 <body> 中的 JavaScript
您可以在 HTML 文档中放置任意数量的脚本。
脚本可以放置在 HTML 页面的 <body> 部分，或 <head> 部分，或两者兼有。
<head> 中的 JavaScript
在此示例中，JavaScript 函数放置在 HTML 页面的 <head> 部分。
当点击按钮时，该函数被调用（执行）
示例
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落已更改。";
}
</script>
</head>
<body><h2>Head 中的 JavaScript 演示</h2>
<p id="demo">一段文字</p>
<button type="button" onclick="myFunction()">试一试</button>
</body>
</html>
自己动手试一试 »
<body> 中的 JavaScript
在此示例中，JavaScript 函数放置在 HTML 页面的 <body> 部分。
当点击按钮时，该函数被调用（执行）
示例
<!DOCTYPE html>
<html>
<body>
<h2>Body 中的 JavaScript 演示</h2>
<p id="demo">一段文字</p>
<button type="button" onclick="myFunction()">试一试</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落已更改。";
}
</script>
</body>
</html>
自己动手试一试 »
将脚本放置在 <body> 元素的底部可以提高显示速度，因为脚本解释会减慢显示。
外部 JavaScript
脚本也可以放置在外部文件中
外部文件：myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "段落已更改。";
}
当在许多不同的网页中使用相同的代码时，外部脚本很实用。
JavaScript 文件具有文件扩展名 .js。
要使用外部脚本，请将脚本文件的名称放在 <script> 标签的 src（源）属性中
您可以根据需要将外部脚本引用放置在 <head> 或 <body> 中。
该脚本的行为将与它位于 <script> 标签所在位置的行为完全相同。
外部脚本不能包含 <script> 标签。
外部 JavaScript 的优点
将脚本放置在外部文件中具有一些优点
- 它将 HTML 与代码分离
- 它使 HTML 和 JavaScript 更易于阅读和维护
- 缓存的 JavaScript 文件可以加快页面加载速度
要向一个页面添加多个脚本文件 - 请使用多个 script 标签
示例
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
外部引用
外部脚本可以通过 3 种不同的方式引用
- 使用完整的 URL（完整的网址）
- 使用文件路径（如 /js/）
- 不带任何路径
此示例使用完整的 URL 链接到 myScript.js
此示例使用文件路径链接到 myScript.js
此示例不使用任何路径链接到 myScript.js
You can read more about file paths in the chapter HTML File Paths.
