關(guān)于如何在html中引用使用js真的是特別簡(jiǎn)單的事情磅崭,因?yàn)榇蠹叶加靡恍└吣艿那岸司庉嬈鳎热鐆ebstorm,Atom等...輸入一個(gè)"<s"就會(huì)自動(dòng)補(bǔ)全<script>標(biāo)簽透揣,但這是紅皮書(shū)的第二章內(nèi)容板乙,我覺(jué)得還是必要做一下筆記的~
首先說(shuō)一下<script>元素,這個(gè)元素由Netscape創(chuàng)造并在Netscape Navigator2中首先實(shí)現(xiàn)具篇,后來(lái)這個(gè)元素被正式被加入html規(guī)范中,HTML4.01為其定義了六個(gè)屬性:
async:可選纬霞,表示應(yīng)該立即下載腳本,但不應(yīng)該妨礙頁(yè)面中的其他操作驱显。只對(duì)外部腳本有效诗芜,也就是通過(guò)src引入的。
charset:可選埃疫。表示通過(guò)src屬性指定的代碼的字符集伏恐,但是大多數(shù)瀏覽器會(huì)忽略它的值,所以很少有用栓霜。
defer:可選翠桦。表示腳本可以延遲到文檔完全被解析和顯示之后再執(zhí)行。也只對(duì)外部腳步有效胳蛮。
language:已廢棄销凑。原來(lái)用于表示編寫(xiě)代碼使用的腳本語(yǔ)言,比如JavaScript,或VBScript.src:可選仅炊。表示包含要執(zhí)行代碼的外部文件斗幼。
type:可選。表示編寫(xiě)代碼使用的腳本語(yǔ)言的內(nèi)容類(lèi)型(也稱(chēng)為MIME類(lèi)型)抚垄。實(shí)際上服務(wù)器在傳送JavaScript文件時(shí)使用的MIME類(lèi)型通常是application/x-javascript蜕窿,但在type中設(shè)置這個(gè)值可能導(dǎo)致腳本被忽略谋逻。另外,在非IE瀏覽器還可以使用application/javascript和application/ecmascript桐经』僬祝考慮到約定俗稱(chēng)的和最大限度的瀏覽器兼容,其值還是text/javascript!
以上是HTML4為<script>定義的6個(gè)屬性阴挣,接下來(lái)我們看看HTML5又有做了什么樣的改動(dòng)气堕。
可以看到‘language’已經(jīng)廢棄了,多了一個(gè)crossorigin屬性屯吊。雖然還沒(méi)有完全被標(biāo)準(zhǔn)化送巡,但是一些瀏覽器支持crossorigin屬性『行叮基本的想法是骗爆,瀏覽器會(huì)限制對(duì)非同源資源的使用(同源資源是指相同的協(xié)議、hostname 以及端口)蔽介。crossorgin不是一個(gè)神奇的安全手段摘投,它所做的只是讓瀏覽器啟用正常的 CORS 訪問(wèn)檢查,發(fā)起一個(gè)OPTIONS請(qǐng)求并檢查Access-Controlheader虹蓄。它有兩個(gè)值:anonymous和use-credentials犀呼。這個(gè)屬性通用可以用在<video>和<img>。
關(guān)于屬性補(bǔ)充兩個(gè)地方
defer(延遲下載) vs asyn(異步腳本)
雖然兩個(gè)屬性都是告訴瀏覽器立即下載但是腳本會(huì)被延遲到整個(gè)頁(yè)面都解析完畢再運(yùn)行薇组。但是眾所周知外臂,多個(gè)腳本執(zhí)行順序是按照<script>標(biāo)簽在html中順序,但是async則無(wú)法保證先后執(zhí)行順序律胀。因此建議異步腳本不要在加載期間修改DOM宋光。
src vs href
src用于替換當(dāng)前元素,href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系炭菌。
src是source的縮寫(xiě)罪佳,指向外部資源的位置,指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置黑低;在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)赘艳,例如js腳本,img圖片和frame等元素克握。
<script src="js.js"></script>
當(dāng)瀏覽器解析到該元素時(shí)蕾管,會(huì)暫停其他資源的下載和處理,直到將該資源加載菩暗、編譯娇掏、執(zhí)行完畢,圖片和框架等元素也如此勋眯,類(lèi)似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)婴梧。這也是為什么將js腳本放在底部而不是頭部。
href是Hypertext Reference的縮寫(xiě)客蹋,指向網(wǎng)絡(luò)資源所在位置塞蹭,建立和當(dāng)前元素(錨點(diǎn))或當(dāng)前文檔(鏈接)之間的鏈接,如果我們?cè)谖臋n中添加
<link href="css.css" rel="styesheet">
那么瀏覽器會(huì)識(shí)別該文檔為css文件讶坯,就會(huì)并行下載資源并且不會(huì)停止對(duì)當(dāng)前文檔的處理番电。這也是為什么建議使用link方式來(lái)加載css,而不是使用@import方式辆琅。
引用JS
使用<script>元素的方式有兩種:直接在頁(yè)面嵌入JavaScript代碼和包含外部JavaScript文件
在使用<script>元素嵌入JavaScript代碼時(shí)漱办,只須為<script>指定type屬性,即text/javascript婉烟。通過(guò)<script>來(lái)包含外部js文件娩井,src則是必須的,另外擴(kuò)展名不是必需的似袁,如果不適用.js擴(kuò)展名洞辣,請(qǐng)確保服務(wù)器能返回正確的MIME類(lèi)型。另外當(dāng)瀏覽器遇到字符串"</script>"時(shí)昙衅,就會(huì)認(rèn)為那是結(jié)束的</script>標(biāo)簽扬霜,而通過(guò)轉(zhuǎn)義字符"\"解決這個(gè)問(wèn)題。關(guān)于<script>位置應(yīng)該頁(yè)面后面而涉,防止出現(xiàn)由于等待js代碼被全部下載而導(dǎo)致瀏覽窗口一片空白著瓶。
另外在XHTML可以寫(xiě)成<script src="js.js" /> 但是在html是不可以這樣,這樣書(shū)寫(xiě)不符合HTML規(guī)范啼县。而且也得不到某些瀏覽器材原,尤其是IE的正確解析。
在XHTML中
在HTML中谭羔,有特殊規(guī)則用以確定<script>元素中的那些元素可以被解析华糖,但這些特殊的規(guī)則在xhtml中不適用,比如在html中可以用"<" 來(lái)判斷a是否小于b瘟裸,可是xhtml需要將所有小于號(hào)替換成html實(shí)體(<)客叉。保證相同代碼在xhtml中正常運(yùn)行的方法就是使用一個(gè)CData片段來(lái)包含JS代碼,在xhtml中话告,CData是文檔中的一個(gè)特殊區(qū)域兼搏。
<script><![CData[
?//正常js的代碼
]]></script>
最后,要說(shuō)的是現(xiàn)在很少有瀏覽器不支持js沙郭,可以使用<noscript>標(biāo)簽佛呻,這個(gè)標(biāo)簽的內(nèi)容會(huì)在不支持js的瀏覽器中顯示出來(lái)