HTML中嵌入JavaScript代码的四种方式详解

HTML嵌入JavaScript的四种方式概述

JavaScript代码可以放置在HTML文档的任意位置，但为了遵循最佳实践，通常推荐以下几种标准方式。

• 将代码放置在 <head>...</head> 标签内部。
• 将代码放置在 <body>...</body> 标签内部。
• 同时在 <body>...</body> 和 <head>...</head> 两个部分中放置代码。
• 使用外部JavaScript文件，并在 <head>...</head> 部分引入该文件。

在head部分嵌入脚本

接下来，我们将通过具体章节演示上述不同包含JavaScript的方式： 第一种方式：在JavaScript的<head>... </ 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部分嵌入脚本

第二种方式：在JavaScript的<body>... </ body>部分中嵌入代码。

如果脚本需要在页面加载时立即运行以生成页面内容，则应将脚本放置在文档的<body>部分。在这种情况下，无需预先定义所有JavaScript功能：

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>

同时在head和body中使用脚本

第三种方式：JavaScript同时出现在<body> 和 <head> 部分。

你可以按照以下方式，完全在<head>和<body>部分中分别放置JavaScript代码：

<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时，你可能会发现某些情况下需要在网站的多个页面中重用相同的JavaScript代码。

你不必在多个HTML文件中重复维护相同的代码。script标签提供了一种机制，允许将JavaScript存储在外部文件中，然后将其包含到HTML文件中。

下面是一个示例，说明如何使用脚本标记和src属性将外部JavaScript文件包含在HTML代码中：

<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>

使用来自外部文件的JavaScript时，需要将所有JavaScript代码写入一个扩展名为“.js”的简单文本文件中，然后如上所示包含该文件。

例如，你可以将以下内容保持在文件filename.js中，然后在HTML文件中使用sayHello函数后包含filename.js文件：

function sayHello() {
  alert("Hello World")
}