Javascript 简明教程

JavaScript - Placement in HTML File

JavaScript Placement in HTML File

在 HTML 文档中的任何位置放置 JavaScript code 都是灵活的。但是，将 JavaScript 包含在 HTML 文件中的最首选方法如下所示−

There is flexibility to place JavaScript code anywhere in an HTML document. However, the most preferred ways to include JavaScript in an HTML file are as follows −

  1. Script in <head>…​</head> section.

  2. Script in <body>…​</body> section.

  3. Script in <body>…​</body> and <head>…​</head> sections.

  4. Script in an external file and then include in <head>…​</head> section.

你可以按照下面的语法使用脚本标记添加 JavaScript 代码。

You can follow the syntax below to add JavaScript code using the script tag.

<script>
   // JavaScript code
</script>

在下一节中，我们将看到如何通过不同的方式将 JavaScript 放置在 HTML 文件中。

In the following section, we will see how we can place JavaScript in an HTML file in different ways.

JavaScript in <head>…​</head> section

如果你希望在某些事件上运行脚本，比如当用户单击某处时，那么你将按照如下方式将该脚本放在头部中−

If you want to have a script run on some event, such as when a user clicks somewhere,then you will place that script in the head as follows −

<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 定义的函数。看看下面的代码。

If you need a script to run as the page loads so that the script generates content in the page, then the script goes in the <body> portion of the document. In this case, youwould not have any function defined using JavaScript. Take a look at the following code.

<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> 部分中，如下所示−

You can put your JavaScript code in <head> and <body> sections altogether as follows −

<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 代码。

As you begin to work more extensively with JavaScript, you will likely find cases where you are reusing identical JavaScript code on multiple pages of a site.

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

You are not restricted to be maintaining identical code in multiple HTML files. The script tag provides a mechanism to allow you to store JavaScript in an external file and then include it in your HTML files.

要从外部文件来源中使用 JavaScript，你需要在扩展名为“.js”的纯文本文件中编写所有 JavaScript 源代码，然后按照如下所示包含该文件。

To use JavaScript from an external file source, you need to write all your JavaScript source code in a simple text file with the extension ".js" and then include that file as shown below.

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

For example, you can keep the following content in the filename.js file, and then you can use the sayHello function in your HTML file after including the filename.js file.

filename.js

filename.js

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

这是一个示例，展示了如何使用脚本标记及其 src 属性在 HTML 代码中包含外部 JavaScript 文件。

Here is an example to show how you can include an external JavaScript file in your HTML code using the script tag and its src attribute.

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

You may include the external script reference within the <head> or <body> tag.

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

此外，你可以创建不同的模块来更好地维护代码，并在另一个 JavaScript 文件中导入每个模块，或在一个 HTML 文件中导入所有模块。

Also, you can create different modules to maintain code better and import each module in another JavaScript file or import all modules in a single HTML file.

你可以遵循下面的代码将 multiple scripts 添加到一个 HTML 文件中。

You can follow the below code to add multiple scripts into a single HTML file.

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

External References

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

You can add an external JavaScript file in the HTML using the below 3 ways.

1. Using the full file path

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

When you need to add any hosted JavaScript file or a file that doesn’t exists in the same project into the HTML, you should use the full file path.

例如，

For example,

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

2. Using the relative file path

如果你正在处理项目，并且 JavaScript 和 HTML 两个文件都在不同的文件夹中，那么你可以使用相对文件路径。

If you are working on the project and JavaScript and HTML both files are in different folders, you can use the relative file path.

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

3. Using the filename only

如果 HTML 和 JavaScript 两个文件在同一个文件夹中，那么你可以使用文件名。

If HTML and JavaScript both files are in the same folder, you can use the file name.

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

Advantages of using the <script> tag

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

Here are the advantages of using the <script> tag to add JavaScript in the HTML.

Ease of Integration

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

The <script> tag allows developers to integrate JavaScript into the HTML file easily. Adding JavaScript to the HTML file allows you to add behavior and interactivity to the web page.

Immediate Execution

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

Whenever the browser finds a <script> tag on the web page, it immediately executes the JavaScript code defined inside that. It enables website visitors to interact with the web pages and get real-time updates immediately.

Inline and External scripts

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

You can use the <script> tag to add the inline or external script into the HTML file. If you want to load JavaScript before the HTML of a web page, you can add the <script. Tag in the <head> tag. Otherwise, you can add the <script> tag in the <body> tag.

External Libraries and Frameworks integration

<script> 标签使你能够将外部库和框架添加到 HTML 网页。

The <script> tag enables you to add external libraries and frameworks to the HTML web page.

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

For example, in the below code, we have added JQuery to the web page using its CDN.

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

这里，“src”属性包含指向该库的托管链接。

Here, the "src" attribute contains the hosted link to the library.

Global Scope Access

你定义在脚本标签中的任何代码都能访问网页的全局作用域。你可以随时随地在代码中访问全局变量、函数等内容。

Whatever code you define in the script tag has access to the global scope of the web page. You can access the global variables, functions, etc., anywhere in the code.