01、在 HTML 頁面中嵌入 JavaScript 代碼

不建議將JavaScript 中的<script>代碼直接放置在HTML內(nèi)，這種情況，僅應(yīng)用于概念驗證或測試目的。


<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JavaScript Hello World Example</title>    <script>        alert('Hello, World!');</script></head><body></body></html>

在<script>元素中，我們使用alert()函數(shù)來顯示Hello, World! 消息。

02、外部引言JavaScript 文件

要包含來自外部文件的 JavaScript：

首先，創(chuàng)建一個擴(kuò)展名為.jseg的文件，app.js并將其放在js子文件夾中。請注意，js 不需要將 JavaScript 文件放在文件夾中，但這是一個很好的做法。
然后，src在<script>元素的屬性中使用指向 JavaScript 源代碼文件的 URL 。

下面顯示了 app.js 文件的內(nèi)容：


alert('Hello, World!');

以下顯示了該helloworld.html文件：


<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JavaScript Hello World Example</title>    <script src="js/app.js"></script></head><body>
</body></html>

如果你helloworld.html在 Web 瀏覽器中啟動該文件，你將看到一個包含該Hello, World!消息的彈出窗口。

請注意，你可以從遠(yuǎn)程服務(wù)器加載 JavaScript 文件。這允許你提供來自各種域的 JavaScript，例如內(nèi)容交付網(wǎng)絡(luò) (CDN) 以加快頁面速度。

當(dāng)頁面上有多個 JavaScript 文件時，JavaScript 引擎會按文件出現(xiàn)的順序解釋這些文件。請參閱以下示例：


<script src="js/service.js"></script><script src="js/app.js"></script>

JavaScript 引擎將依次解釋service.js和app.js文件。它先完成對service.js文件的解釋，然后再解釋app.js文件。

對于包含許多外部 JavaScript 文件的頁面，在頁面渲染階段會顯示空白頁面。為避免這種情況，您可以在</body>標(biāo)記之前包含 JavaScript 文件，如下例所示：


<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JavaScript Hello World Example</title></head><body>    <!-- end of page content here-->   <script src="js/service.js"></script>   <script src="js/app.js"></script></body></html>

async和defer屬性

要更改 JavaScript 代碼的加載和執(zhí)行方式，你可以使用<script>elementasync和的兩個屬性之一defer。

這些屬性僅對外部腳本文件有效。async如果可能，該屬性會指示 Web 瀏覽器異步執(zhí)行 JavaScript 文件（如果可見）。該async屬性不保證腳本文件按它們出現(xiàn)的順序執(zhí)行。例如：


<script async src="service.js"></script><script async src="app.js"></script>

該app.js文件可能根據(jù)之前執(zhí)行service.js的文件，因此，你必須確保它們之間不存在依賴關(guān)系。

defer如果該屬性可見，則請求 Web 瀏覽器在解析文檔后執(zhí)行腳本文件。


<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JavaScript defer demonstration</title>    <script defer src="defer-script.js"></script></head><body></body></html>

即使我們將<script>元素放在<head>部分中，腳本也會等待瀏覽器接收到結(jié)束標(biāo)記<html>開始執(zhí)行。

概括

使用<script>element 在 HTML 頁面中包含 JavaScript 文件。
該元素的async屬性<script>指示 Web 瀏覽器并行獲取 JavaScript 文件，然后在 JavaScript 文件可用時立即解析并執(zhí)行。
元素的defer屬性<script>允許 Web 瀏覽器在解析文檔后執(zhí)行 JavaScript 文件。