极客教程JavaScript – 在HTML文件中的位置
在HTML文档中包含JavaScript代码的灵活性很大。然而，在HTML文件中包含JavaScript的最常用方式如下 −
- 在
<head>...</head>部分中的脚本。 -
在
<body>...</body>部分中的脚本。 -
在
<head>...</head>部分和<body>...</body>部分中的脚本。 -
在外部文件中的脚本，然后在
<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
如果您需要在页面加载时运行脚本，以便该脚本在页面中生成内容，则该脚本将放在文档的
部分中。在这种情况下，您不会使用JavaScript定义任何函数。看看以下代码。<html>
<head>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>
此代码将产生以下结果 −
在<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文件中维护相同的代码。 script 标记提供了一种方式，允许您将JavaScript存储在外部文件中，然后将其包含到您的HTML文件中。
这里是一个示例，演示如何使用 script 标记和其 src 属性在您的HTML代码中包含外部JavaScript文件。
<html>
<head>
<script type = "text/javascript" src = "filename.js" ></script>
</head>
<body>
.......
</body>
</html>
要使用外部文件源的JavaScript，您需要在一个扩展名为“ .js”的简单文本文件中编写所有JavaScript源代码，然后像上面那样包含该文件。 例如，您可以在文件 filename.js 文件中保持以下内容，然后在包含filename.js文件后，即可在您的HTML文件中使用 sayHello 函数。
function sayHello() {
alert("Hello World")
}