极客教程JavaScript 在HTML文件中的位置
在HTML文档中，我们可以灵活地包含JavaScript代码。然而，在HTML文件中包含JavaScript的最常用方式如下：
- 在
<head>...</head>部分中的脚本。 -
在
<body>...</body>部分中的脚本。 -
在
<body>...</body>和<head>...</head>部分中的脚本。 -
将脚本放在外部文件中，然后在
<head>...</head>部分中进行包含。
在接下来的章节中，我们将看到如何以不同的方式在HTML文件中放置JavaScript代码。
在<head>...</head>部分中的JavaScript
如果您想在某个事件（例如用户点击某个地方）发生时运行脚本，则可以将该脚本放置在head部分中，方法如下所示−
<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>
在<body>...</body>部分的JavaScript
如果你需要一个脚本在页面加载时运行，以便脚本在页面中生成内容，则脚本放在文档的<body>部分。在这种情况下，你不需要使用JavaScript定义任何函数。看一下以下代码。
<html>
<head>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>
此代码将产生以下结果−
Hello World
This is web page body
位于<body>和<head>部分的JavaScript
你可以将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
当你开始更广泛地使用JavaScript时，你可能会发现有一些情况在网站的多个页面上重复使用相同的JavaScript代码。
你不必在多个HTML文件中维护相同的代码。标签提供了一种机制，允许你将JavaScript存储在一个外部文件中，然后将其包含到你的HTML文件中。
以下是一个示例，展示了如何使用标签和其属性将外部JavaScript文件包含到你的HTML代码中。
<html>
<head>
<script type = "text/javascript" src = "filename.js" ></script>
</head>
<body>
.......
</body>
</html>
要使用外部文件源的JavaScript，您需要将所有的JavaScript源代码写在一个简单的文本文件中，扩展名为“ .js”，然后按照上面显示的那样包含该文件。
例如，您可以将以下内容保存在 filename.js 文件中，然后在包含filename.js文件后，在您的HTML文件中使用 sayHello 函数。
function sayHello() {
alert("Hello World")
}