image.png
將 JavaScript插入HTML的主要方法是使用 <script> 元素痰催。
使用方式
- 方式一 ：頁面中直接嵌入行內
JavaScript代碼
<script>
function sayHi() {
console.log("Hi!我是豆叔!");
}
</script>
- 方式一二：頁面中引入外部文件中的
JavaScript代碼
<script src="demo.js"></script>
<script src="http://www.abc.com/demo.js"></script>
需要注意的是這兩種方式都會阻塞頁面驹马，所以一般建議把JavaScript引用放在</body>元素之前(不是必須)序愚。
<script> 元素屬性
| 屬性 | 說明 |
|---|---|
async |
可選妖混。表示應該立即開始下載腳本，但不能阻止其他頁面動作唤崭，比如下載資源或等待其他腳本加載扯俱。只對外部腳本文件有效。 |
charset |
可選牺弹。使用 src 屬性指定的代碼字符集浦马。這個屬性很少使用，因為大多數瀏覽器不在乎它的值张漂。 |
crossorigin |
可選晶默。配置相關請求的CORS（跨源資源共享）設置，默認不使用CORS航攒。crossorigin="anonymous"配置文件請求不必設置憑據標志磺陡。crossorigin="use-credentials" 設置憑據標志，意味著出站請求會包含憑據。 |
defer |
可選币他。表示腳本可以延遲到文檔完全被解析和顯示之后再執(zhí)行坞靶。只對外部腳本文件有效。在 IE7 及更早的版本中蝴悉，對行內腳本也可以指定這個屬性彰阴。 |
integrity |
可選。允許比對接收到的資源和指定的加密簽名以驗證子資源完整性（SRI拍冠，Subresource Integrity）尿这。如果接收到的資源的簽名與這個屬性指定的簽名不匹配，則頁面會報錯庆杜，腳本不會執(zhí)行射众。 這個屬性可以用于確保內容分發(fā)網絡 （CDN，Content Delivery Network）不會提供惡意內容晃财。防止文件被劫持篡改责球，比如DNS劫持 |
language |
廢棄。最初用于表示代碼塊中的腳本語言（如 "JavaScript" 拓劝、 "JavaScript 1.2"或 "VBScript" ）。大多數瀏覽器都會忽略這個屬性嘉裤，不應該再使用它郑临。 |
src |
可選。表示包含要執(zhí)行的代碼的外部文件屑宠。 |
type |
可選厢洞。代替 language ，表示代碼塊中腳本語言的內容類型（也稱 MIME 類型）典奉。默認值是 "text/javascript"躺翻。 標準 MIME 類型的完整列表 |
<noscript> 元素
- 瀏覽器不支持腳本
- 瀏覽器對腳本的支持被關閉
任何一個條件被滿足，包含在 <noscript> 中的內容就會被渲染卫玖。否則公你，瀏覽器不會渲染 <noscript>中的內容。
我是從來沒用過假瞬，但是用vue-cli創(chuàng)建項目的index.html頁面中是有這個元素的陕靠。
總結
- 要包含外部
JavaScript文件，必須將src屬性設置為要包含文件的URL脱茉。文件可以跟網頁在同一臺服務器上剪芥，也可以位于完全不同的域。 - 所有
<script>元素會依照它們在網頁中出現(xiàn)的次序被解釋琴许。在不使用defer和async屬性的情況下税肪，包含在<script>元素中的代碼必須嚴格按次序解釋。 - 對不推遲執(zhí)行的腳本，瀏覽器必須解釋完位于 <script> 元素中的代碼益兄，然后才能繼續(xù)渲染頁面的剩余部分锻梳。為此，通常應該把
<script>元素放到頁面末尾偏塞，介于主內容之后及</body>標簽之前唱蒸。 - 可以使用
defer屬性把腳本推遲到文檔渲染完畢后再執(zhí)行。推遲的腳本原則上按照它們被列出的次序執(zhí)行灸叼。 - 可以使用
async屬性表示腳本不需要等待其他腳本神汹，同時也不阻塞文檔渲染，即異步加載古今。異步腳本不能保證按照它們在頁面中出現(xiàn)的次序執(zhí)行屁魏。 - 通過使用
<noscript>元素，可以指定在瀏覽器不支持腳本時顯示的內容捉腥。如果瀏覽器支持并啟用腳本氓拼，則<noscript>元素中的任何內容都不會被渲染。
