如何將 JavaScript 代碼添加到網頁中，以及

比如：

<!DOCTYPE HTML>
<html>

<body>

  <p>script 標簽之前...</p>

  <script>
    alert('Hello, world!');
  </script>

  <p>...script 標簽之后</p>

</body>

</html>

<script> 標簽中包裹了 JavaScript 代碼，當瀏覽器遇到 <script> 標簽，代碼會自動運行。

現代的標記

<script> 標簽有一些現在很少用到的屬性，但是我們可以在老代碼中找到它們：

type 屬性：<script type=...>

在老的 HTML4 標准中，要求 <script> 標簽有 type 屬性。通常是 type="text/javascript"。這樣的屬性聲明現在已經不再需要。而且，現代 HTML 標准 —— HTML5 已經完全改變了此屬性的實際含義。現在，該屬性可以被用於 JavaScript 模塊。但那是一個高級一點的話題，我們將會在此教程的其他章節中探討 JavaScript 模塊。

language 屬性：<script language=...>

這個屬性是為了顯示腳本使用的語言。這個屬性現在已經沒有任何意義，因為語言默認就是 JavaScript。不再需要使用它了。

腳本前后的注釋：

在非常古老的書籍和指南中，你可能會在 <script> 標簽里面找到注釋，就像這樣：
```
<script type="text/javascript"></script>
```
現代 JavaScript 中已經不這樣使用了。這些注釋是用於不支持 <script> 標簽的古老的瀏覽器隱藏 JavaScript 代碼的。由於最近 15 年內發布的瀏覽器都沒有這樣的問題，因此這種注釋能幫你辨認出一些老掉牙的代碼。

外部腳本

如果你有大量的 JavaScript 代碼，我們可以將它放入一個單獨的文件。

腳本文件可以通過 src 屬性添加到 HTML 文件中。

<script src="/path/to/script.js"></script>

這里，/path/to/script.js 是腳本文件從站點根目錄開始的絕對路徑。當然也可以提供當前頁面的相對路徑。例如，src =“script.js” 表示當前文件夾中的 “script.js” 文件。

我們也可以提供一個完整的 URL 地址，例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>

要附加多個腳本，請使用多個標簽：

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…

請注意：

一般來說，只有最簡單的腳本才嵌入到 HTML 中。更復雜的腳本存放在單獨的文件中。

使用獨立文件的好處是瀏覽器會下載它，然后將它保存到瀏覽器的緩存中。

之后，其他頁面想要相同的腳本就會從緩存中獲取，而不是下載它。所以文件實際上只會下載一次。

這可以節省流量，並使得頁面（加載）更快。

提醒：如果設置了 src 屬性，script 標簽內容將會被忽略。

一個單獨的 <script> 標簽不能同時有 src 屬性和內部包裹的代碼。

這將不會工作：

<script src="file.js">
  alert(1); // 此內容會被忽略，因為設定了 src
</script>

我們必須進行選擇，要么使用外部的 <script src="…">，要么使用正常包裹代碼的 <script>。

為了讓上面的例子工作，我們可以將它分成兩個 <script> 標簽。

<script src="file.js"></script>
<script>
  alert(1);
</script>

總結

我們可以使用一個 <script> 標簽將 JavaScript 代碼添加到頁面中。
type 和 language 屬性不是必需的。
外部的腳本可以通過 <script src="path/to/script.js"></script> 的方式插入。

有關瀏覽器腳本以及它們和網頁的關系，還有很多可學的。但是請記住，教程的這部分主要是針對 JavaScript 語言本身的，所以我們不該被瀏覽器特定的實現分散自己的注意力。我們將使用瀏覽器作為運行 JavaScript 的一種方式，這種方式非常便於我們在線閱讀，但這只是很多種方式中的一種。

作業題

1. 顯示一個提示語

重要程度：⭐️⭐️⭐️⭐️⭐️

創建一個頁面，然后顯示一個消息 “I'm JavaScript!”。

在沙箱中或者在你的硬盤上做這件事都無所謂，只要確保它能運行起來。

你可以先看一下新窗口的演示結果。

在微信公眾號「技術漫談」后台回復 1-2-1 獲取本題答案。

2. 使用外部的腳本顯示一個提示語

重要程度：⭐️⭐️⭐️⭐️⭐️

打開題目 1 的答案。將答案中腳本的內容提取到一個外部的 alert.js 文件中，放置在相同的文件夾中。

打開頁面，確保它能夠工作。

你可以先看一下新窗口的演示結果。

在微信公眾號「技術漫談」后台回復 1-2-1 獲取本題答案。

現代 JavaScript 教程：開源的現代 JavaScript 從入門到進階的優質教程。React 官方文檔推薦，與 MDN 並列的 JavaScript 學習教程。

在線免費閱讀：https://zh.javascript.info/

掃描下方二維碼，關注微信公眾號「技術漫談」，訂閱更多精彩內容。

現代的標記

外部腳本

總結

作業題

1. 顯示一個提示語

2. 使用外部的腳本顯示一個提示語

免責聲明！