將JavaScript插入到HTML中，主要的方法就是使用<script>標(biāo)簽医瘫。
<noscript>
作用
針對(duì)早起瀏覽器不支持JavaScript的問題箫攀，提供一個(gè)頁面優(yōu)雅降級(jí)的處理方案昔搂。
<noscript>顯示的條件
- 瀏覽器不支持腳本竹观。
- 瀏覽器對(duì)腳本的支持被關(guān)閉。
這兩個(gè)條件只要滿足其中之一包含在<noscript>中的內(nèi)容就會(huì)進(jìn)行渲染遭赂；否則循诉，瀏覽器不會(huì)渲染其中的內(nèi)容。
出現(xiàn)的位置
<noscript>元素可以包含任何可以出現(xiàn)在<body>中的HTML元素撇他∏衙ǎ【<script>除外】
<script>元素
<script>元素中的屬性：
- type：【可選】表示代碼塊中腳本語言的類型（MIME類型）。默認(rèn)值為
text/javascript困肩。
取值：application/x-javascript表示JavaScript划纽。module表示模塊，只能使用import和export锌畸。 - src：【可選】表示包含要執(zhí)行的腳本的外部文件勇劣。引用外部文件的時(shí)候使用。
- async：【可選】表示立即下載頁面潭枣，但是不能阻止其他頁面動(dòng)作芭毙。
- defer：【可選】表示腳本可以延遲到文檔完全解析和顯示之后在執(zhí)行。
使用腳本的兩種方式
直接在網(wǎng)頁中嵌入JavaScript代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function sayHi() {
console.log("sayHi");
}
sayHi() // sayHi
</script>
</body>
</html>
引用外部JavaScript文件
hello.js
console.log("hello.js 文件");
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="hello.js"></script>
</body>
</html>
注意事項(xiàng)
1卸耘、直接將js代碼嵌入到HTML文件中時(shí)，字符串中不能出現(xiàn)</script>粘咖，否則將會(huì)報(bào)錯(cuò)蚣抗。通過使用轉(zhuǎn)義字符\進(jìn)行編碼。
2瓮下、引用外部文件時(shí)翰铡，不應(yīng)該在<script>標(biāo)簽內(nèi)插入JavaScript代碼。
3讽坏、加載外部JS文件的時(shí)候锭魔，不受瀏覽器同源策略限制。
4路呜、HTML中的<script>是按順序進(jìn)行解釋【在沒有使用defer和async的情況下】迷捧。
5织咧、盡量使用引入外部文件，這樣便于維護(hù)漠秋、緩存【如果兩個(gè)頁面引用同一個(gè)js笙蒙，這個(gè)js文件只需要下載一次即可】。
<script>標(biāo)簽的位置
- 之前：所有的
<script>標(biāo)簽放在<head>中庆锦，這樣把外部的css捅位、js文件都集中放在一起。
缺點(diǎn)：導(dǎo)致頁面渲染的延遲：因?yàn)楸仨毎?code><head>中所有的JS文件全部下載搂抒、解析和解釋之后艇搀，才開始進(jìn)行頁面的渲染。
- 現(xiàn)在：將
<script>標(biāo)簽放在</body>標(biāo)簽之前求晶。
推遲執(zhí)行腳本-defer
屬性defer：告訴瀏覽器立即下載js文件焰雕，但是延遲執(zhí)行。腳本會(huì)延遲到整個(gè)頁面都解釋完畢后再運(yùn)行誉帅。
異步執(zhí)行腳本- async
屬性async：告訴瀏覽器立即下載js文件淀散，但是延遲執(zhí)行。有多個(gè)外部腳本時(shí)蚜锨，可以同時(shí)運(yùn)行档插。
動(dòng)態(tài)加載腳本
使用JavaScript中的DOM API進(jìn)行動(dòng)態(tài)加載腳本。
方法一：使用document.create()進(jìn)行
通過DOM動(dòng)態(tài)添加script元素同時(shí)加載指定的腳本亚再。
function loadScript(url) {
let script = document.createElement("script");
script.src = url;
script.type = "text/javascript";
document.head.appendChild(script);
}
方法二：使用XMLHttpRequest進(jìn)行動(dòng)態(tài)加載JS
// 獲取js
function getJS(url) {
let xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
runJS(xhr.responseText);
} else {
throw Error("加載失敗")
}
}
}
xhr.send();
}
// 運(yùn)行js
function runJS(text) {
let script = document.createElement("script");
script.type = "text/javascript";
// script.text = text; // 和下一行作用一致郭膛。
script.appendChild(document.createTextNode(text))
document.head.appendChild(script);
}
