本章內(nèi)容
- 使用<script>元素
- 嵌入腳本與外部腳本
- 文檔模式對(duì)JS的影響
- 考慮禁用JS的場(chǎng)景
（1）script元素
向HTML頁(yè)面中插入JS的主要方法就是使用script元素。
在script元素里面有6個(gè)屬性有的基本上已經(jīng)廢棄
- async (可選)表示應(yīng)該立即下載腳本，但是不妨礙頁(yè)面上的其他操作蝴乔。比如下載其他資源或等待加載其他腳本.只對(duì)外部腳本文件有效.
- charset (可選)表示通過(guò)SRC屬性指定代碼的字符集插佛。由于大多數(shù)瀏覽器會(huì)忽略他的值癞尚。因此很少有人用.
- defer (可選)表示腳本可以延遲到文檔完全被解析和顯示之后在執(zhí)行毡惜。只對(duì)外部腳本文件有效
- language 廢棄
- src (可選)表示包含要執(zhí)行代碼的外部文件.
- type (可選)表示編寫(xiě)代碼使用的腳本語(yǔ)言的內(nèi)容類型(text/javascript)不過(guò)這個(gè)屬性不是必須渊胸，沒(méi)有指定的話蔬浙，默認(rèn)就是(text/javascript)
包含在script元素內(nèi)部的JS代碼將從上至下依次解釋猪落。就拿下面的例子來(lái)說(shuō):解釋器會(huì)解釋到一個(gè)函數(shù)的定義，然后將該定義保存在自己的環(huán)境中畴博，在解釋器對(duì)script元素內(nèi)部的所有代碼求助完畢以前笨忌，頁(yè)面中的其余內(nèi)容都不會(huì)被瀏覽器加載或者顯示.
<script>
function Hello(){
window.alert("<\/script>")
}
</script>
備注
- 在使用script內(nèi)聯(lián)到HTML里面的時(shí)候，請(qǐng)不要在代碼中的任何地方出現(xiàn)"</script>"等字符串俱病，因?yàn)檫@樣瀏覽器會(huì)報(bào)出一個(gè)錯(cuò)誤官疲。
- 如果非要使用請(qǐng)?jiān)谇懊婕由限D(zhuǎn)移符號(hào)\這樣就變成了/script這樣就不會(huì)報(bào)出錯(cuò)誤
- 在HTML中使用script請(qǐng)一定要前后都要有閉口。不能前面有script,而后面沒(méi)有script這樣做他不會(huì)運(yùn)行的
（i）標(biāo)簽的位置
按照慣例標(biāo)簽的位置都應(yīng)該放在頁(yè)面的<head>元素中亮隙，比如
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<title>PC與移動(dòng)端切換</title>
<meta name="keywords" content=" ">
<meta name="description" content=" ">
<script type="text/javascript" src="js/respond.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="js/judgeindex.js"></script>
</head>
<body>
[里面寫(xiě)內(nèi)容]()
</body>
- 這種做法的目的就是把所有的外部文件(包括CSS文件和JS文件)的引用都放在相同的地方.
- 可是在文檔的<head>元素中包含所有的JS文件途凫，一位置必須要等到全部的JS代碼都被下載,解析和執(zhí)行完成后,才開(kāi)始呈現(xiàn).
- 對(duì)于需要很多JS代碼的頁(yè)面來(lái)說(shuō)。無(wú)疑會(huì)導(dǎo)致瀏覽器在呈現(xiàn)頁(yè)面的延遲溢吻，而延遲期間的瀏覽器窗口將會(huì)一片空白.為了避免這樣的情況维费，一般吧JS引用放在<body>元素頁(yè)面內(nèi)容的后面.
(ii)延遲腳本
- HTML標(biāo)簽中定義了defer屬性,這個(gè)屬性的用途是表明腳本在執(zhí)行的時(shí)候不會(huì)影響頁(yè)面的構(gòu)造.
- 也就是說(shuō)腳本會(huì)被延遲到整個(gè)頁(yè)面都解析完畢后在運(yùn)行。因此在<script>元素中設(shè)置defer屬性促王。相當(dāng)于告訴瀏覽器在body結(jié)束后執(zhí)行
- <script type="text/javascript" defer="defer" src="js/jquery.min.js"></script>
(iii)異步腳本
- HTML5為<script>元素定義了async屬性犀盟。它只適用于外部腳本文件。他與defer類似蝇狼。但是區(qū)別在于async的腳本并不能表征按照寫(xiě)好的先后順序執(zhí)行阅畴。
- <script type="text/javascript" async=“async” src="js/respond.js"></script>
- <script type="text/javascript" async="async" src="js/jquery.min.js"></script>
- 在上面的代碼中第二個(gè)腳本可能會(huì)在第一個(gè)腳本文件之前執(zhí)行的，所以確保2個(gè)互不依賴十分重要迅耘，比如jquery類庫(kù),async屬性的目的是不讓頁(yè)面等待兩個(gè)腳本的下載和執(zhí)行贱枣。從而異步加載頁(yè)面其他內(nèi)容.為此，建議異步腳本不要再加載期間修改DOM
- 異步腳本一定會(huì)在load事件前執(zhí)行颤专。
(iv)在XHTML中的用法
<script type="text/javascript">
function comnpare(a,b)
{
if (a < b)
{
window.alert("a<b");
}else if( a > b)
{
window.alert("a>b");
}else if(a = b)
{
window.alert("a = b");
}
}
</script>
- 在HTML中有特殊的規(guī)則可以確定<scirpt>元素中哪些內(nèi)容可以被解析,但是這些特殊的規(guī)則在XHTML中不適用.
- 在這里比如a < b中的小于號(hào)(<)在XHTML中會(huì)被當(dāng)做開(kāi)始一個(gè)新的標(biāo)簽來(lái)解析纽哥，小于號(hào)后面不能跟空格，因此會(huì)導(dǎo)致語(yǔ)法錯(cuò)誤.
- 避免XHTML中出現(xiàn)語(yǔ)法的錯(cuò)誤有2個(gè)栖秕，第一個(gè)用相應(yīng)的HTML實(shí)體(<)來(lái)替代<號(hào),這樣是不會(huì)報(bào)錯(cuò)但是難以理解
- 第二個(gè)方法是保證讓相同的代碼在HTML中正常運(yùn)行的第二個(gè)方法.就是用一個(gè)CData片段來(lái)包含JS代碼.
- 譬如<script type="text/javascript">
<![CDATA[
function comnpare(a,b)
{
if (a < b)
{
window.alert("a<b");
}else if( a > b)
{
window.alert("a>b");
}else if(a = b)
{
window.alert("a = b");
}
}
]]>
</script>
(2)嵌入代碼與外部文件
在HTML代碼中嵌入JS代碼雖然沒(méi)有問(wèn)題春塌，但是最好使用外語(yǔ)引入。
- 可維護(hù)性:遍及不同HTML頁(yè)面的JS會(huì)造成維護(hù)問(wèn)題，但是吧所有的JS文件都放到一個(gè)文件里面摔笤，維護(hù)起來(lái)就會(huì)寬松多了。這樣便于集中管理
- 可緩存:瀏覽器能夠依據(jù)具體的設(shè)置緩存鏈接所有的外部JS文件垦写。也就是說(shuō)如果有2個(gè)頁(yè)面都使用同一個(gè)文件吕世。那么這個(gè)文件只需下載一次。因此最終效果就是加快頁(yè)面加載的速度
- 適應(yīng)未來(lái):通過(guò)外部文件來(lái)包含JS無(wú)需使用前面提到的XHTML,HTML和XHTML包含的外部文件的語(yǔ)法是相同的梯投。
(3)文檔模式
-
混雜模式
要是不區(qū)分的話命辖。混雜模式會(huì)讓IE的行為與IE5相同所以個(gè)人不建議使用 -
標(biāo)準(zhǔn)模式
標(biāo)準(zhǔn)模式讓IE的行為更接近標(biāo)準(zhǔn)行為分蓖。
- 過(guò)渡型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
- 嚴(yán)格型
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- HTML5
<!DOCTYPE html>
(4)<noscript>禁止JS
包含在<noscript>里面的元素只有在下面2種情況下顯示出來(lái).
- 瀏覽器不支持腳本
- 瀏覽器支持腳本但是腳本被禁用
符合上面任何一個(gè)條件尔艇，瀏覽器都睡顯示<noscript>內(nèi)容,除此之外在其他的情況下,瀏覽器不會(huì)呈現(xiàn)<noscript>內(nèi)容
<noscript>
本頁(yè)面需要瀏覽器支持JS
</noscirpt>
當(dāng)用戶要是啟用了JS，用戶永遠(yuǎn)也看不到他么鹤，盡管他是頁(yè)面的一部分.
第二章小結(jié)
- 在包含外部JS文件時(shí)终娃，必須將SRC屬性設(shè)置為指向相應(yīng)文件的URL，而這個(gè)文件既可以是同域文件蒸甜，也可以是跨域文件.
- 所有<script>都會(huì)按照他們?cè)陧?yè)面中出現(xiàn)的先后順序依次被解析棠耕。在不使用defer和async情況下。只有解析玩<script>的代碼之后柠新，才會(huì)解析后面的代碼
- 所有瀏覽器會(huì)優(yōu)先解析玩不使用defer的<script>代碼窍荧，,然后在解析后面的內(nèi)容,所以一般把<script>元素放在后面即</body>前面
- 使用defer屬性可以讓腳本在文檔完全呈現(xiàn)后在執(zhí)行，延遲腳本按照他們的順序執(zhí)行
- 使用async則不必等待恨憎，也不必阻塞文檔呈現(xiàn)蕊退。不能保證加載順序
- 使用<noscript>則可以在瀏覽器禁止JS的時(shí)候呈現(xiàn)出來(lái)
