1.4　JavaScript使用

我們可以用三種方式將JavaScript代碼嵌入HTML頁面中。

①　內聯的JavaScript

②　外部的JavaScript

③　行內的JavaScript

首先，使用記事本創建一個空白的文件，保存時將文件名的擴展名改為.html（如：test.html），保存類型選擇“所有文件（*.*）”，編碼選擇UTF-8，單擊“保存”按鈕進行保存，一個空白的HTML頁面就創建好了，然后用瀏覽器打開這個頁面。

如果你用的是Mac OS系統，則使用文本編輯工具創建一個文件，在執行“格式”|“制作純文本”命令，同樣在保存文件時將文件的擴展名改為.html，格式選擇“網頁（.html）”，單擊“存儲”按鈕，此時系統會彈出一個詢問框，單擊“使用.html”按鈕即可。

1.4.1　內聯的JavaScript

如需在HTML頁面中插入JavaScript，需要使用<script>標簽。

瀏覽器會解釋并執行位于<script>和</script>之間的JavaScript代碼，打開你的記事本，復制以下代碼到之前建立的HTML文檔中，保存后刷新瀏覽器。

document.write方法會向HTML頁面中寫入指定值，在上面的代碼中，我們向HTML頁面中寫入了一個h1標簽，如果刷新瀏覽器，頁面會顯示hello world，則表示JavaScript代碼運行成功。

1.4.2　外部的JavaScript

JavaScript代碼也可以放在一個擴展名為.js的文件中，利用<script>標簽將其引入HTML頁面，<script>標簽的src屬性設置外部腳本的地址，這個地址可以是相對地址，也可以是絕對地址。

顧名思義，相對地址即是被引用的文件相對于當前頁面的地址，例如./example.js，表示example.js文件位于當前目錄下的同級位置；絕對地址則是被引用的文件在網絡或本地的絕對位置，具有唯一性，不會隨頁面位置的變化而變化，例如https://example.com/js/example.js。

當JavaScript代碼需要被應用到很多頁面時，外部JavaScript引用將是理想的選擇。使用外部JavaScript，即可通過更改一個文件來改變整個站點的代碼，而不需要在每個頁面中逐一調整。

那么，如果為<script>標簽指定了src，引用外部js文件，而且又在<script>中編寫了一段代碼，結果將會怎么樣呢？

上述代碼中，頁面仍然顯示hello world，并不會顯示hello book，這表示指定了src屬性的<script>，其中的JavaScript代碼會被忽略。

1.4.3　行內的JavaScript

還有一種使用JavaScript的方式，即在html標簽上直接添加JavaScript代碼，但通常不推薦使用這種方式，因為這樣會讓代碼變得難以維護。

當有大量行內的JavaScript代碼嵌入頁面時，頁面就會變得混亂不堪，降低代碼維護的效率。此外，這也會增大頁面的體積，增長頁面的加載時間。

練習

• 新建一個HTML頁面。
• 新建一個.js文件。
• 分別使用內聯、外部、行內三種JavaScript代碼使用方式，在瀏覽器中顯示hello world字樣。