在 HTML中使用 JavaScript · JavaScript學習之路

>[info] 在 HTML 頁面中使用 JavaScript 代碼和在 HTML中使用 CSS 樣式一樣，也有三種方法，即當頁面書寫、外部引用、和在當前行書寫三種這三種方法中，前兩種都會用到 `<script>` 標簽，第三種是在 HTML 標簽中使用 `Javascript:` 的方式書寫 ## 一、當前頁面書寫使用 `<script> ... </script>` 標簽，可以將 JavaScript 代碼寫在 HTML 文檔的任意位置如： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>this is a test</title> <script type="text/javascript"> function sayHello(){ alert("Hello World"); } </script> </head> <body> </body> </html> ~~~ `<script>` 定義了下列 6 個屬性 * src ：可選。表示包含要執行代碼的外部文件。 * async ：可選，異步加載，表示立即下載該 JavaScript 腳本，但不影響其它代碼的繼續執行，此屬性只有在加載外部代碼（使用 src 屬性）時才會有效。 * type ：可選，默認為 `type="text/javascript"` ,和 language 屬性一樣，都可用來指定該` <script> `標簽中的腳本的類型的。 * charset：可選，用來指定當前腳本的字符集，此屬性也是只有在使用 src 屬性之后才會有效，但因為一般瀏覽器會直接忽略該屬性，所以使用的較少。 * defer：可選，表示等到當前腳本可以等到該頁面代碼完全加載顯示之后再執行，此屬性也只針對外部引入腳本有效，也就是使用了 src 屬性之后有效。 * language：已廢棄，原來用于表示編寫代碼使用的腳本語言，由于大部分瀏覽器都會忽略該屬性，所以也就沒什么用了 >[danger] 包含在 `<script>` 元素內部的 JavaScript 代碼將被從上至下依次解釋。就拿前面這個例子來說，解釋器會解釋一個函數的定義，然后將該定義保存在自己的環境當中。在解釋器對 `<script>` 元素內部的所有代碼求值完畢以前，頁面中的其余內容都不會被瀏覽器加載或顯示 ## 二、外部引入方式使用外部引入的方式，需要用到 `<script>` 標簽中的 `src` 屬性，例如： ~~~ <script type="text/javascript" src="howie.js"></script> ~~~ 上面這段代碼表示，在當前頁面中引入一個外部名叫 howie.js 的 js 文件 >[danger] 如果在 `<script>` 標簽中使用了 src 屬性，則寫在當前 `<script>`與`</script>` 標簽之間的 JavaScript 代碼將會被忽略，也就是不會被執行 ## 三、在當前 HTML 標簽中書寫 JavaScript 代碼通常前兩種方式已經能夠滿足日常的大部分需求了，但有時也會有一些特殊的需求，需要在 HTML 標簽中書寫 JavaScript 代碼，如： ~~~ <a href="Javascript:alert('我就是不給你跳');">這個 a 鏈接不會跳轉</a> <button type="button" onclick="javascript:document.location.href='http://www.baidu.com'">普通按鈕也可以跳轉</button> ~~~ 以上這段代碼第一個 `<a>`標簽將不會跳轉，第二個普通的 `<button>` 按鈕將會跳轉到另一個網站。 >[danger] 無論用何種方式書寫 JavaScript 代碼，只要不存在 `defer` 和` async` 屬性，瀏覽器都會按照 `<script>` 元素在頁面中出現的先后順序對它們依次進行解析。換句話說，在第一個 `<script>` 元素包含的代碼解析完成后，第二個 `<script>` 包含的代碼才會被解析，然后才是第三個、第四個…… ## JavaScript 代碼的書寫位置按照傳統的做法，所有的 JavaScript 代碼都需要書寫在 `<head>` 標簽當中，但是這樣所有的 CSS 樣式、JavaScript 腳本全部加載完成后，再加載 HTML 代碼中的 body 部分，就會影響當前頁面的加載速度，所以，推薦的書寫 JavaScript 腳本的位置是在 body 的末尾部分，如下： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>this is a test</title> </head> <body>  <script type="text/javascript" src="howie.js"></script> <script type="text/javascript"> /* JavaScript 腳本書寫位置 */ </script> </body> </html> ~~~ 這樣書寫，在解析 JavaScript 代碼之前，頁面的內容將會完全呈現在瀏覽器當，而用戶也不會因為覽器窗口顯示空白頁面而感覺到加載太慢了。 ## 建議書寫方式建議將所有的 `JavaScript` 文件及`CSS` 和 `HTML` 文件分開獨立書寫，做到**行為**、**樣式**、**結構**相分離，這樣結構會更加清晰，也更易于維護。