JavaScript 代码位置
<script> 标签
在 HTML 中，JavaScript 代码被插入在 <script> 和 </script> 标签之间。
旧的 JavaScript 示例可能使用 type 属性：<script type="text/javascript">。
type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。
JavaScript 函数和事件
JavaScript function 是一个 JavaScript 代码块，当“调用”时可以执行。
例如，当发生一个事件时，比如用户点击一个按钮，可以调用一个函数。
您将在后面的章节中学习更多关于函数和事件的知识。
JavaScript 在 <head> 或 <body> 中
您可以在 HTML 文档中放置任意数量的脚本。
脚本可以放置在 HTML 页面 <body> 中，或者在 <head> 部分中，或者两者都有。
JavaScript 在 <head> 中
在这个例子中，一个 JavaScript function 被放置在 HTML 页面 <head> 部分中。
单击按钮时调用（调用）该函数。
示例
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落已更改。";
}
</script>
</head>
<body><h2>演示 JavaScript 在头部</h2>
<p id="demo">一段文字</p>
<button type="button" onclick="myFunction()">试试看</button>
</body>
</html>
自己尝试一下 »
JavaScript 在 <body> 中
在本例中，JavaScript function 放在 HTML 页面 的 <body> 部分。
单击按钮时调用（调用）该函数。
示例
<!DOCTYPE html>
<html>
<body>
<h2>演示 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。
要使用外部脚本，请将脚本文件名放在 src（源）属性中 <script> 标签。
您可以根据需要将外部脚本引用放在 <head> 或 <body> 中。
该脚本的行为将与它位于 <script> 标签所在位置完全相同。
外部脚本不能包含 <script> 标签。
外部 JavaScript 优势
将脚本放在外部文件中有一些优势。
- 它将 HTML 和代码分开。
- 它使 HTML 和 JavaScript 更易于阅读和维护。
- 缓存的 JavaScript 文件可以加快页面加载速度。
要将多个脚本文件添加到一个页面，请使用多个脚本标签。
示例
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
外部引用
外部脚本可以通过三种不同的方式引用。
- 使用完整的 URL（完整的网页地址）
- 使用文件路径（如 /js/）
- 不使用任何路径
本例使用 完整的 URL 链接到 myScript.js
本例使用 文件路径 链接到 myScript.js
本例不使用任何路径链接到 myScript.js
您可以在章节 HTML 文件路径 中了解有关文件路径的更多信息。
