如何使用脚本标签将JavaScript插入HTML

　　脚本标签是将JavaScript插入HTML页面的主要方法。脚本标签有六个属性，大多数JavaScript开发人员经常使用不足和误解。我们将查看脚本标签的所有使用方式以及每个属性的重要性和使用。

　　使用HTML中的脚本标签

　　脚本标签是将JavaScript插入HTML的主要方法。脚本标签由Netscape创建，首次在Netscape Navigator 2中实现，就JavaScript的历史而言。有两种方法可以使用脚本标签在HTML中插入JavaScript。

　　内联JavaScript

　　可以将JavaScript直接插入HTML文件中。这里有一个如何使用脚本标签做到这一点的例子。

　　我会继续从脚本标签开始。在脚本标签之间，我将创建一个

　　helloWorld

　　函数，将文本“Hello World”打印到控制台。在下一行，我将继续调用函数。这是在HTML页面中包含JavaScript的最简单方法，但不是最佳方法。这种方法适用于特定于页面的短脚本或脚本。关于内联JavaScript，需要记住的另一件事是，它不能异步加载或延迟。因此，内联JavaScript是渲染块;这意味着浏览器将在移动到下一行代码之前从上到下解析和执行内联JavaScript。因此，一旦加载HTML和CSS，最好在页面页脚中包含内联JavaScript(如果有的话)。

　　外部JavaScript文件

　　将JavaScript插入HTML文件的另一种方法是使用外部文件。这是将JavaScript文件插入HTML的最常用方法。让我们看看一个例子。假设这是我项目中文件的组织方式，其中索引.html文件和main.js文件都位于同一个项目文件夹中。

　　./├── main.js├── index.html

　　这是我们将main.js文件插入index.html文件的方法。 首先，我将声明脚本标签，然后在脚本标签中包含一个名为src的属性。 src属性指向我们要包含的JavaScript文件。 就这么简单; main.js文件现在包含在我们的HTML中。

　　脚本标签属性

　　脚本标记的属性之间经常会有很多混淆。 混乱尤其集中在两个属性上，即延迟和异步。 但是，让我们一一看一下所有脚本标记属性，并了解它们如何影响浏览器对待外部JavaScript文件的方式。

　　类型(可选)

　　type属性指示HTML中外部文件中使用的脚本语言的内容类型，也称为MIME类型。这就是如何在脚本标签中包含类型属性的方式。

　　交叉起源(可选)

　　网页经常提出在其他服务器上加载资源的请求。这就是跨源资源共享(通常缩写为CORS)的地方。从另一个域请求跨源请求资源(例如样式表、iframes、图像、字体或脚本)。CORS用于管理跨源请求。它定义了浏览器和服务器如何交互的方式，以确定允许跨源请求是否安全。CORS允许服务器指定谁可以访问服务器上的资产，以及其他许多事情。这里有一个如何使用交叉起源属性的例子。

　　因此，交叉起源属性有两种可能的选项。第一个是“匿名”选项。在这种情况下，将执行跨源请求，并且不发送凭据。这通常与完整性属性一起使用，完整性属性发送散列，接收服务器验证请求。我们将将此作为下一个属性进行详细研究。

　　交叉起源属性的下一个可能值是“使用凭据”。在这种情况下，执行跨源请求，凭据可以随请求发送。凭据可以是cookie、证书、HTTP基本身份验证等。大多数时候，可以用“匿名”选项，但知道发送凭据的选项也存在总是好的。

　　完整性(可选)

　　完整性属性允许浏览器检查获取的脚本，以确保如果源代码被操作，代码永远不会加载。我将举一个我们经常用于插入HTML的Bootstrap CDN代码的例子。

　　异步(可选)

　　要使用异步属性，只需要在脚本标签中包含该属性。请注意，异步属性仅适用于外部JavaScript文件，不适用于内联JavaScript。

　　async属性向浏览器表明，脚本应立即开始下载，并且不应阻止页面的其余渲染。然而，JavaScript与页面的其余部分异步执行。异步方法不会等到 DOM 的其余部分完成加载后才能执行。这是一种加载JavaScript的非渲染阻塞方式。

　　推迟(可选)

　　使用 defer 属性和使用异步属性一样简单。只需要在脚本标签中包含延迟属性。

　　当使用defer属性时，脚本执行将推迟到所有文档内容完全加载后。然而，脚本立即开始下载，但直到所有内容加载并准备就绪后才执行。

　　如果既不包含异步也不延迟会发生什么

　　如果既没有在脚本中包含异步或延迟属性，则脚本将变成渲染块。这意味着浏览器将首先解析和执行脚本，然后将其移动到HTML中的下一行代码。这会影响网页加载速度。