文章目录
JavaScript 在html中的位置
<script> 标签
在 HTML 中，JavaScript 代码插入在 <script> 和 </script> 标签之间。
示例
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
旧的 JavaScript 示例可能使用 type 属性：<script type="text/javascript">。
type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。
JavaScript 函数和事件
JavaScript 函数是 JavaScript 代码块，可以在“调用”时执行。
例如，当发生事件（如用户单击按钮时）时可以调用函数。
您将在后面的章节中了解有关函数和事件的更多信息。
<head> 或 <body> 中的 JavaScript
您可以在 HTML 文档中放置任意数量的脚本。
脚本可以放在 HTML 页面的 <body> 或 <head> 部分中，或两者中。
<head>中的 JavaScript
在此示例中，JavaScript 函数放置在 HTML 页面的 部分中。
单击按钮时将调用该函数：
示例
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraphchanged.";
}
</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="myScript.js"></script>
您可以根据需要将外部脚本引用放在 <head> 或 <body> 中。
脚本的行为就像它位于 <script> 标记所在的位置一样。
外部脚本不能包含 <script> 标记。
外部 JavaScript 优势
将脚本放在外部文件中具有一些优势：
它将 HTML 和代码分开
它使 HTML 和 JavaScript 更易于阅读和维护
缓存的 JavaScript 文件可以加快页面加载速度
要将多个脚本文件添加到一个页面 - 使用多个脚本标记：
示例
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
外部引用
外部脚本可以通过 3 种不同的方式引用：
- 使用完整 URL（完整网址）
- 使用文件路径（如 /js/）
- 没有任何路径
此示例使用完整 URL 链接到 myScript.js：
示例
<script src="https://www.w3schools.com/js/myScript.js"></script>
此示例使用文件路径链接到 myScript.js：
示例
<script src="/js/myScript.js"></script>
此示例不使用路径链接到myScript.js：
示例
<script src="myScript.js"></script>
您可以在 HTML 文件路径一章中阅读有关文件路径的更多信息。
总结
本文介绍了JavaScript在html中的位置，如有问题欢迎私信和评论