【JavaScript 教程】第一章入門03— Hello World 示例
將 JavaScript 代碼直接嵌入 HTML 頁面。 引用外部 JavaScript 代碼文件。
01、在 HTML 頁面中嵌入 JavaScript 代碼
<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)建一個(gè)擴(kuò)展名為.jseg的文件，app.js并將其放在js子文件夾中。請注意，js 不需要將 JavaScript 文件放在文件夾中，但這是一個(gè)很好的做法。
然后，src在<script>元素的屬性中使用指向 JavaScript 源代碼文件的 URL 。
下面顯示了 app.js 文件的內(nèi)容：
alert('Hello, World!');
以下顯示了該helloworld.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 瀏覽器中啟動(dòng)該文件，你將看到一個(gè)包含該Hello, World!消息的彈出窗口。
請注意，你可以從遠(yuǎn)程服務(wù)器加載 JavaScript 文件。這允許你提供來自各種域的 JavaScript，例如內(nèi)容交付網(wǎng)絡(luò) (CDN) 以加快頁面速度。
當(dāng)頁面上有多個(gè) JavaScript 文件時(shí)，JavaScript 引擎會(huì)按文件出現(xiàn)的順序解釋這些文件。請參閱以下示例：
<script src="js/service.js"></script><script src="js/app.js"></script>
JavaScript 引擎將依次解釋service.js和app.js文件。它先完成對service.js文件的解釋，然后再解釋app.js文件。
對于包含許多外部 JavaScript 文件的頁面，在頁面渲染階段會(huì)顯示空白頁面。為避免這種情況，您可以在</body>標(biāo)記之前包含 JavaScript 文件，如下例所示：
<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和的兩個(gè)屬性之一defer。
這些屬性僅對外部腳本文件有效。async如果可能，該屬性會(huì)指示 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í)行腳本文件。
<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>部分中，腳本也會(huì)等待瀏覽器接收到結(jié)束標(biāo)記<html>開始執(zhí)行。
概括
使用<script>element 在 HTML 頁面中包含 JavaScript 文件。
該元素的async屬性<script>指示 Web 瀏覽器并行獲取 JavaScript 文件，然后在 JavaScript 文件可用時(shí)立即解析并執(zhí)行。
元素的defer屬性<script>允許 Web 瀏覽器在解析文檔后執(zhí)行 JavaScript 文件。
推薦閱讀
【JavaScript 教程】第一章入門01—認(rèn)識(shí)JavaScript
【JavaScript 教程】第一章入門02—JavaScript 代碼編輯器及網(wǎng)頁開發(fā)工具
學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號(hào)
