JavaScript - 放置在 HTML 文件中

上一页
下一页

HTML 文件中的 JavaScript 位置

可以灵活地将 JavaScript 代码放置在 HTML 文档中的任何位置。但是，在 HTML 文件中包含 JavaScript 的最首选方法如下 -

  • <head>放置脚本...</head>
  • <body>放置脚本...</body>
  • <body>放置脚本...</body> 和 <head>放置脚本...</head>
  • <head>放置脚本......</head>

您可以按照以下语法使用 script 标签添加 JavaScript 代码。


<script>
	 	// JavaScript code
</script>

在下一节中，我们将了解如何以不同的方式将 JavaScript 放置在 HTML 文件中。

<head>... 中的 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> 部分。在这种情况下，您不会使用 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 文件中。

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

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

filename.js


function sayHello() {
	 	alert("Hello World")
}
外部 JavaScript 文件不包含 <script> 标签。

以下示例演示如何使用 script 标签及其 src 属性在 HTML 代码中包含外部 JavaScript 文件。

您可以在 <head> 或 <body> 标签中包含外部脚本引用。


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

此外，您还可以创建不同的模块以更好地维护代码，并将每个模块导入到另一个 JavaScript 文件中，或者将所有模块导入到单个 HTML 文件中。

您可以按照以下代码将多个脚本添加到单个 HTML 文件中。


<head>
	 <script src = "filename1.js" ></script>
	 <script src = "filename2.js" ></script>
	 <script src = "filename3.js" ></script>
</head>

外部引用

您可以使用以下 3 种方法在 HTML 中添加外部 JavaScript 文件。

1. 使用完整的文件路径

当您需要将任何托管 JavaScript 文件或同一项目中不存在的文件添加到 HTML 中时，您应该使用完整的文件路径。

例如


<head>
	 <script src = "C://javascript/filename.js" ></script>
</head>

2. 使用相对文件路径

如果您正在处理项目，并且 JavaScript 和 HTML 文件位于不同的文件夹中，则可以使用相对文件路径。


<head>
	 <script src = "javascript\filename.js" ></script>
</head>

3. 仅使用文件名

如果 HTML 和 JavaScript 两个文件位于同一文件夹中，则可以使用文件名。


<head>
	 <script src = "filename.js" ></script>
</head>

使用 <script> 标签的优势

以下是使用 <script> 标签在 HTML 中添加 JavaScript 的优点。

易于集成

<script> 标签允许开发人员轻松地将 JavaScript 集成到 HTML 文件中。将 JavaScript 添加到 HTML 文件允许您向网页添加行为和交互性。

立即执行

每当浏览器在网页上找到 <script> 标签时，它就会立即执行该标签中定义的 JavaScript 代码。它使网站访问者能够与网页交互并立即获得实时更新。

内联脚本和外部脚本

您可以使用 <script> 标签将内联脚本或外部脚本添加到 HTML 文件中。如果要在网页的 HTML 之前加载 JavaScript，可以添加 <script。标签中的 <head> 标签。否则，您可以在 <body> 标签中添加 <script> 标签。

外部库和框架集成

使用 <script> 标记，可以将外部库和框架添加到 HTML 网页中。

例如，在下面的代码中，我们使用其 CDN 将 JQuery 添加到网页中。


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"> </script>

此处，“src” 属性包含指向库的托管链接。

全局范围访问

您在 script 标记中定义的任何代码都可以访问 Web 页面的全局范围。您可以在代码中的任何位置访问全局变量、函数等。

打印本页
上一页
下一页