>[info] 在 HTML 頁面中使用 JavaScript 代碼 和在 HTML中使用 CSS 樣式一樣，也有三種方法，即當(dāng)頁面書寫、外部引用、和在當(dāng)前行書寫三種
這三種方法中，前兩種都會用到 `<script>` 標(biāo)簽 ，第三種是在 HTML 標(biāo)簽中 使用 `Javascript:` 的方式書寫
## 一 、當(dāng)前頁面書寫
使用 `<script> ... </script>` 標(biāo)簽，可以將 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 ：可選。表示包含要執(zhí)行代碼的外部文件。
* async ：可選，異步加載，表示立即下載該 JavaScript 腳本，但不影響其它代碼的繼續(xù)執(zhí)行，此屬性只有在加載外部代碼（使用 src 屬性）時才會有效。
* type ：可選，默認為 `type="text/javascript"` ,和 language 屬性一樣，都可用來指定該` <script> `標(biāo)簽中的腳本的類型的。
* charset： 可選，用來指定當(dāng)前腳本的字符集，此屬性也是只有在使用 src 屬性之后才會有效，但因為一般瀏覽器會直接忽略該屬性，所以使用的較少。
* defer： 可選，表示等到當(dāng)前腳本可以等到該頁面代碼完全加載顯示之后再執(zhí)行，此屬性也只針對外部引入腳本有效，也就是使用了 src 屬性之后有效。
* language：已廢棄，原來用于表示編寫代碼使用的腳本語言，由于大部分瀏覽器都會忽略該屬性，所以也就沒什么用了
>[danger] 包含在 `<script>` 元素內(nèi)部的 JavaScript 代碼將被從上至下依次解釋。就拿前面這個例子來說，解釋器會解釋一個函數(shù)的定義，然后將該定義保存在自己的環(huán)境當(dāng)中。在解釋器對 `<script>` 元素內(nèi)部的所有代碼求值完畢以前，頁面中的其余內(nèi)容都不會被瀏覽器加載或顯示
## 二、外部引入方式
使用外部引入的方式，需要用到 `<script>` 標(biāo)簽中的 `src` 屬性，例如：
~~~
<script type="text/javascript" src="howie.js"></script>
~~~
上面這段代碼表示，在當(dāng)前頁面中引入一個外部名叫 howie.js 的 js 文件
>[danger] 如果在 `<script>` 標(biāo)簽中使用了 src 屬性，則寫在當(dāng)前 `<script>`與`</script>` 標(biāo)簽之間的 JavaScript 代碼將會被忽略，也就是不會被執(zhí)行
## 三、在當(dāng)前 HTML 標(biāo)簽中書寫 JavaScript 代碼
通常前兩種方式已經(jīng)能夠滿足日常的大部分需求了，但有時也會有一些特殊的需求，需要在 HTML 標(biāo)簽中書寫 JavaScript 代碼，如：
~~~
<a href="Javascript:alert('我就是不給你跳');">這個 a 鏈接不會跳轉(zhuǎn)</a>
<button type="button" onclick="javascript:document.location.href='http://www.baidu.com'">普通按鈕也可以跳轉(zhuǎn)</button>
~~~
以上這段代碼第一個 `<a>`標(biāo)簽將不會跳轉(zhuǎn)，第二個普通的 `<button>` 按鈕將會跳轉(zhuǎn)到另一個網(wǎng)站。
>[danger] 無論用何種方式書寫 JavaScript 代碼，只要不存在 `defer` 和` async` 屬性，瀏覽器都會按照 `<script>` 元素在頁面中出現(xiàn)的先后順序?qū)λ鼈円来芜M行解析。換句話說，在第一個 `<script>` 元素包含的代碼解析完成后，第二個 `<script>` 包含的代碼才會被解析，然后才是第三個、第四個……
## JavaScript 代碼的書寫位置
按照傳統(tǒng)的做法，所有的 JavaScript 代碼都需要書寫在 `<head>` 標(biāo)簽當(dāng)中，但是這樣所有的 CSS 樣式、JavaScript 腳本全部加載完成后，再加載 HTML 代碼中的 body 部分，就會影響當(dāng)前頁面的加載速度，所以，推薦的書寫 JavaScript 腳本的位置是在 body 的末尾部分，如下：
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this is a test</title>
</head>
<body>
<!-- 主體 HTML 代碼部分-->
<script type="text/javascript" src="howie.js"></script>
<script type="text/javascript">
/* JavaScript 腳本書寫位置 */
</script>
</body>
</html>
~~~
這樣書寫，在解析 JavaScript 代碼之前，頁面的內(nèi)容將會完全呈現(xiàn)在瀏覽器當(dāng)，而用戶也不會因為覽器窗口顯示空白頁面而感覺到加載太慢了。
## 建議書寫方式
建議將所有的 `JavaScript` 文件及`CSS` 和 `HTML` 文件分開獨立書寫，做到**行為**、**樣式**、**結(jié)構(gòu)**相分離，這樣結(jié)構(gòu)會更加清晰，也更易于維護。
AI寫作智能體 自主規(guī)劃任務(wù)，支持聯(lián)網(wǎng)查詢和網(wǎng)頁讀取，多模態(tài)高效創(chuàng)作各類分析報告、商業(yè)計劃、營銷方案、教學(xué)內(nèi)容等。
![]()
廣告