如何创建和使用外部JavaScript文件

刺骨的言语ヽ痛彻心扉 2022-12-06 15:23 134阅读 0赞

Placing [JavaScripts][] directly into the file containing the HTML for a web page is ideal for short scripts used while learning JavaScript. When you start creating scripts to provide significant functionality for your web page, however, the quantity of JavaScript can become quite large, and including these large scripts directly in the web page poses two problems:

对于在学习JavaScript时使用的简短脚本，将[JavaScript][JavaScripts]直接放置到包含HTML网页的文件中非常理想。 但是，当您开始创建脚本来为网页提供重要功能时，JavaScript的数量可能会变得非常大，并且直接在网页中包含这些大型脚本会带来两个问题：

*  It may affect the ranking of your page with the various search engines if the JavaScript takes up a majority part of the page content. This lowers the frequency of use of keywords and phrases that identify what the content is about.
    
    如果JavaScript占据了页面内容的大部分，则可能会影响各种搜索引擎对页面的排名。 这降低了使用关键字和短语来标识内容的含义。
 *  It makes it harder to reuse the same JavaScript feature on multiple pages on your website. Each time you want to use it on a different page, you will need to copy it and insert it into each additional page, plus any changes the new location requires. 
    
    这使得在网站的多个页面上重复使用相同JavaScript功能变得更加困难。 每次您想在其他页面上使用它时，都需要将其复制并插入到每个其他页面中，以及新位置所需的任何更改。

It is much better if we make the JavaScript independent of the web page that uses it.

如果我们使JavaScript与使用它的网页无关，那会更好。

## 选择要移动JavaScript代码 **(** Selecting JavaScript Code to Be Moved **)** ##

Fortunately, the [developers][] of HTML and JavaScript have provided a solution to this problem. We can move our JavaScripts off of the web page and still have it function exactly the same.

幸运的是，HTML和JavaScript的[开发人员][developers]已经为该问题提供了解决方案。 我们可以将JavaScript移出网页，但其功能仍然完全相同。

The first thing that we need to do to make a JavaScript external to the page that uses it is to select the actual JavaScript code itself (without the surrounding HTML script tags) and copy it into a separate file.

将JavaScript制作到使用它的页面外部的第一件事是选择实际JavaScript代码本身(没有周围HTML脚本标签)并将其复制到单独的文件中。

For example, if the following script is on our page we would select and copy the part in bold:

例如，如果以下脚本在我们的页面上，我们将选择并复制粗体部分：

There used to be a practice placing JavaScript in an HTML document inside of comment tags to stop older browsers from displaying the code; however, new HTML standards say that browsers should automatically treat the code inside of [HTML comment tags][] as comments, and this results in browsers ignoring your Javascript.

过去，有一种做法是将JavaScript放在注释标记内HTML文档中，以阻止较早的浏览器显示代码。 但是，新HTML标准表示浏览器应自动将[HTML注释标签中的代码][HTML comment tags]视为注释，这会导致浏览器忽略您的Javascript。

If you have inherited HTML pages from someone else with JavaScript inside of comment tags, then you don't need to include the tags in the JavaScript code that you select and copy.

如果您从其他人那里继承了HTML页面，并且在注释标签中带有JavaScript，那么您无需在选择和复制JavaScript代码中包含这些标签。

For example, you would only copy the bold code, leaving out the HTML comment tags  in the code sample below:

例如，您只需要复制粗体代码，而在下面的代码示例中忽略HTML注释标签<！-和->：

## 将JavaScript代码另存为文件 **(** Saving JavaScript Code as a File **)** ##

Once you have selected the JavaScript code you want to move, paste it into a new file. Give the file a name that suggests what the script does or identifies the page where the script belongs.

选择了要移动JavaScript代码后，将其粘贴到新文件中。 为文件提供一个名称，该名称可以建议脚本做什么或标识该脚本所属的页面。

Give the file a *.js* suffix so that you know the file contains JavaScript. For example we might use *hello.js* as the name of the file for saving the JavaScript from the example above.

给文件添加一个*.js*后缀，以便您知道该文件包含JavaScript。 例如，我们可以使用*hello.js*作为文件的名称，以保存上述示例中JavaScript。

## 链接到外部脚本 **(** Linking to the External Script **)** ##

Now that we have our JavaScript copied and saved into a separate file, all we need to do is reference the external script file on our [HTML web page document][].

现在我们已经将JavaScript复制并保存到一个单独的文件中，我们所要做的就是在[HTML网页文档中][HTML web page document]引用外部脚本文件。

First, delete everything between the script tags:

首先，删除脚本标记之间的所有内容：

**<script type="text/javascript"></script>**

**<script type =“ text / javascript”> </ script>**

This doesn't yet tell the page what JavaScript to run, so we next need to add an extra attribute to the script tag itself that tells the browser where to find the script.

这还没有告诉页面要运行什么JavaScript，因此我们接下来需要向script标签本身添加一个额外的属性，该属性告诉浏览器在哪里找到脚本。

Our example will now look like this:

现在，我们的示例如下所示：

**<script type="text/javascript"src="hello.js"></script>**

**<script type =“ text / javascript” src =“ hello.js”> </ script>**

The src attribute tells the browser the name of the external file from where the JavaScript code for this web page should be read (which is *hello.js* in our example above).

src属性告诉浏览器外部文件的名称，应从该文件中读取此网页JavaScript代码(在上面的示例中为*hello.js* )。

You do not have to put all of your JavaScripts into the same location as your HTML web page documents. You may want to put them into a separate JavaScript folder. In this case, you just modify the value in the **src** attribute to include the file's location. You can specify any relative or absolute web address for the location of the JavaScript source file.

您不必将所有JavaScript都放在与HTML网页文档相同的位置。 您可能需要将它们放入单独JavaScript文件夹中。 在这种情况下，您只需修改**src**属性中的值即可包括文件的位置。 您可以为JavaScript源文件的位置指定任何相对或绝对网址。

## 使用你所知道的 **(** Using What You Know **)** ##

You can now take any script that you have written or any script that you have obtained from a script library and move it from the HTML web page code into an externally referenced JavaScript file.

现在，您可以将自己编写的任何脚本或从脚本库获得的任何脚本从HTML网页代码移至外部引用JavaScript文件中。

You may then access that script file from any web page simply by adding the appropriate HTML script tags that call that script file.

然后，您可以从任何网页访问该脚本文件，只需添加调用该脚本文件的适当HTML脚本标签即可。

> 翻译自: [https://www.thoughtco.com/how-to-create-and-use-external-javascript-files-4072716][https_www.thoughtco.com_how-to-create-and-use-external-javascript-files-4072716]

[JavaScripts]: https://www.thoughtco.com/what-is-javascript-2037921
[developers]: https://www.thoughtco.com/programming-and-developer-certifications-4005348
[HTML comment tags]: https://www.thoughtco.com/java-comments-using-implementation-comments-2034198
[HTML web page document]: https://www.thoughtco.com/save-a-web-page-as-html-or-mht-1058361
[https_www.thoughtco.com_how-to-create-and-use-external-javascript-files-4072716]: https://www.thoughtco.com/how-to-create-and-use-external-javascript-files-4072716