Javascript 简明教程
JavaScript - Placement in HTML File
JavaScript Placement in HTML File
在 HTML 文档中的任何位置放置 JavaScript code 都是灵活的。但是，将 JavaScript 包含在 HTML 文件中的最首选方法如下所示−
-
Script in <head>…</head> section.
-
Script in <body>…</body> section.
-
在 <body>…</body> 和 <head>…</head> 部分中的脚本。
-
在外部文件中编写脚本，然后包含在 <head>…</head> 部分中。
你可以按照下面的语法使用脚本标记添加 JavaScript 代码。
<script>
// JavaScript code
</script>在下一节中，我们将看到如何通过不同的方式将 JavaScript 放置在 HTML 文件中。
JavaScript in <head>…</head> section
如果你希望在某些事件上运行脚本，比如当用户单击某处时，那么你将按照如下方式将该脚本放在头部中−
<html>
<head>
<script type = "text/javascript">
function sayHello() {
alert("Hello World")
}
</script>
</head>
<body>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>JavaScript in <body>…</body> section
如果你需要在页面加载时运行脚本，以便脚本在页面中生成内容，那么该脚本将转到文档的 <body> 部分。在这种情况下，你不会有任何使用 JavaScript 定义的函数。看看下面的代码。
<html>
<head>
</head>
<body>
<script type = "text/javascript">
document.write("Hello World")
</script>
<p>This is web page body </p>
</body>
</html>JavaScript in <body> and <head> Sections
你可以将你的 JavaScript 代码完全放在 <head> 和 <body> 部分中，如下所示−
<html>
<head>
<script type = "text/javascript">
function sayHello() {
alert("Hello World")
}
</script>
</head>
<body>
<script type = "text/javascript">
document.write("Hello World")
</script>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>JavaScript in External File
当你开始更广泛地使用 JavaScript 时，你可能会发现这样一些情况：你在网站的多个页面上重用相同的 JavaScript 代码。
你并不局限于在多个 HTML 文件中维护相同的代码。 script 标记提供了一种机制，允许你将 JavaScript 存储在外部文件中，然后将其包含在 HTML 文件中。
要从外部文件来源中使用 JavaScript，你需要在扩展名为“.js”的纯文本文件中编写所有 JavaScript 源代码，然后按照如下所示包含该文件。
例如，你可以将下面的内容保存在 filename.js 文件中，然后你可以在包含 filename.js 文件后在 HTML 文件中使用 sayHello 函数。
filename.js
function sayHello() {
alert("Hello World")
}这是一个示例，展示了如何使用脚本标记及其 src 属性在 HTML 代码中包含外部 JavaScript 文件。
你可以在 <head> 或 <body> 标记中包含外部脚本引用。
<html>
<head>
<script type = "text/javascript" src = "filename.js" ></script>
</head>
<body>
...
</body>
</html>此外，你可以创建不同的模块来更好地维护代码，并在另一个 JavaScript 文件中导入每个模块，或在一个 HTML 文件中导入所有模块。
你可以遵循下面的代码将 multiple scripts 添加到一个 HTML 文件中。
<head>
<script src = "filename1.js" ></script>
<script src = "filename2.js" ></script>
<script src = "filename3.js" ></script>
</head>1. Using the full file path
当你需要在 HTML 中添加任何托管 JavaScript 文件或不存在于同一个项目中的文件时，你应使用完整文件路径。
例如，
<head>
<script src = "C://javascript/filename.js" ></script>
</head>Advantages of using the <script> tag
这里是使用 <script> 标签在 HTML 中添加 JavaScript 的优点。
Ease of Integration
<script> 标签允许开发人员轻松地将 JavaScript 集成到 HTML 文件中。将 JavaScript 添加到 HTML 文件中允许你在网页上添加行为和交互性。
Inline and External scripts
你可以使用 <script> 标签将内联或外部脚本添加到 HTML 文件中。如果你想在网页的 HTML 之前加载 JavaScript，你可以在 <head> 标签中添加 <script> 标签。否则，你可以在 <body> 标签中添加 <script> 标签。