3.JavaScript在HTML中使用

1.<script>元素

<scrtipt src = "" async defer = "defer " type = "text/javascript" >

? async:可選茂契。表示應(yīng)該立即下載腳本,但不應(yīng)妨礙頁(yè)面中的其他操作慨绳,比如下載其他資源或
等待加載其他腳本掉冶。只對(duì)外部腳本文件有效。
? defer:可選脐雪。表示腳本可以延遲到文檔完全被解析和顯示之后再執(zhí)行厌小。只對(duì)外部腳本文件有
效。
? src:可選战秋。表示包含要執(zhí)行代碼的外部文件璧亚。

現(xiàn)代 Web 應(yīng)用程序一般都把全部 JavaScript 引用放在<body>元素中頁(yè)面內(nèi)容的后面

<!DOCTYPE html> 
<html> 
 <head> 
 <title>Example HTML Page</title> 
 </head> 
 <body> 
 <!-- 這里放內(nèi)容 --> 
 <script type="text/javascript" src="example1.js"></script> 
 <script type="text/javascript" src="example2.js"></script> 
 </body> 
</html> 

延遲腳本:HTML 4.01 為<script>標(biāo)簽定義了 defer 屬性。這個(gè)屬性的用途是表明腳本在執(zhí)行時(shí)不會(huì)影響頁(yè)面的構(gòu)造脂信。也就是說(shuō)癣蟋,腳本會(huì)被延遲到整個(gè)頁(yè)面都解析完畢后再運(yùn)行。因此狰闪,在<script>元素中設(shè)置defer 屬性疯搅,相當(dāng)于告訴瀏覽器立即下載,但延遲執(zhí)行埋泵。

<!DOCTYPE html> 
<html> 
 <head> 
 <title>Example HTML Page</title> 
 <script type="text/javascript" defer="defer" src="example1.js"></script> 
 <script type="text/javascript" defer="defer" src="example2.js"></script> 
 </head> 
 <body> 
 <!-- 這里放內(nèi)容 --> 
 </body> 
</html> 

在這個(gè)例子中幔欧,雖然我們把<script>元素放在了文檔的<head>元素中罪治,但其中包含的腳本將延遲到瀏覽器遇到</html>標(biāo)簽后再執(zhí)行。

異步腳本:HTML5 為<script>元素定義了 async 屬性礁蔗。這個(gè)屬性與 defer 屬性類似觉义,都用于改變處理腳本的行為。同樣與 defer 類似浴井,async 只適用于外部腳本文件晒骇,并告訴瀏覽器立即下載文件。但與 defer不同的是滋饲,標(biāo)記為 async 的腳本并不保證按照指定它們的先后順序執(zhí)行厉碟。例如:

<!DOCTYPE html> 
<html> 
 <head> 
 <title>Example HTML Page</title> 
<script type="text/javascript" async src="example1.js"></script> 
<script type="text/javascript" async src="example2.js"></script> 
 </head> 
 <body> 
 <!-- 這里放內(nèi)容 --> 
 </body> 
</html> 

在以上代碼中,第二個(gè)腳本文件可能會(huì)在第一個(gè)腳本文件之前執(zhí)行屠缭。因此箍鼓,確保兩者之間互不依賴非常重要。指定 async 屬性的目的是不讓頁(yè)面等待兩個(gè)腳本下載和執(zhí)行呵曹,從而異步加載頁(yè)面其他內(nèi)容款咖。為此,建議異步腳本不要在加載期間修改 DOM奄喂。

嵌入代碼與外部文件

在 HTML 中嵌入 JavaScript 代碼雖然沒有問(wèn)題铐殃,但一般認(rèn)為最好的做法還是盡可能使用外部文件來(lái)
包含 JavaScript 代碼。不過(guò)跨新,并不存在必須使用外部文件的硬性規(guī)定富腊,但支持使用外部文件的人多會(huì)強(qiáng)
調(diào)如下優(yōu)點(diǎn)。

? 可維護(hù)性:遍及不同 HTML 頁(yè)面的 JavaScript 會(huì)造成維護(hù)問(wèn)題域帐。但把所有 JavaScript 文件都放在一個(gè)文件夾中赘被,維護(hù)起來(lái)就輕松多了。而且開發(fā)人員因此也能夠在不觸及 HTML 標(biāo)記的情況下肖揣,集中精力編輯 JavaScript 代碼民假。
? 可緩存:瀏覽器能夠根據(jù)具體的設(shè)置緩存鏈接的所有外部 JavaScript 文件。也就是說(shuō)龙优,如果有兩個(gè)頁(yè)面都使用同一個(gè)文件羊异,那么這個(gè)文件只需下載一次。因此彤断,最終結(jié)果就是能夠加快頁(yè)面加載的速度野舶。
? 適應(yīng)未來(lái):通過(guò)外部文件來(lái)包含 JavaScript 無(wú)須使用前面提到 XHTML 或注釋 hack。HTML 和XHTML 包含外部文件的語(yǔ)法是相同的宰衙。

<noscript>元素

早期瀏覽器都面臨一個(gè)特殊的問(wèn)題筒愚,即當(dāng)瀏覽器不支持 JavaScript 時(shí)如何讓頁(yè)面平穩(wěn)地退化。對(duì)這個(gè)問(wèn)題的最終解決方案就是創(chuàng)造一個(gè)<noscript>元素菩浙,用以在不支持 JavaScript 的瀏覽器中顯示替代的內(nèi)容巢掺。這個(gè)元素可以包含能夠出現(xiàn)在文檔<body>中的任何 HTML 元素——<script>元素除外句伶。
包含在<noscript>元素中的內(nèi)容只有在下列情況下才會(huì)顯示出來(lái):
? 瀏覽器不支持腳本;
? 瀏覽器支持腳本陆淀,但腳本被禁用考余。

<html> 
 <head> 
 <title>Example HTML Page</title> 
 <script type="text/javascript" defer="defer" src="example1.js"></script> 
 <script type="text/javascript" defer="defer" src="example2.js"></script> 
 </head> 
 <body> 
<noscript> 
 <p>本頁(yè)面需要瀏覽器支持(啟用)JavaScript。
 </noscript> 
 </body> 
</html> 

這個(gè)頁(yè)面會(huì)在腳本無(wú)效的情況下向用戶顯示一條消息轧苫。而在啟用了腳本的瀏覽器中楚堤,用戶永遠(yuǎn)也不會(huì)看到它——盡管它是頁(yè)面的一部分。

小結(jié)

把 JavaScript 插入到 HTML 頁(yè)面中要使用<script>元素含懊。使用這個(gè)元素可以把 JavaScript 嵌入到HTML 頁(yè)面中身冬,讓腳本與標(biāo)記混合在一起;也可以包含外部的 JavaScript 文件岔乔。而我們需要注意的地方有:

? 在包含外部 JavaScript 文件時(shí)酥筝,必須將 src 屬性設(shè)置為指向相應(yīng)文件的 URL。
而這個(gè)文件既可以是與包含它的頁(yè)面位于同一個(gè)服務(wù)器上的文件雏门,也可以是其他任何域中的文件嘿歌。
? 所有<script>元素都會(huì)按照它們?cè)陧?yè)面中出現(xiàn)的先后順序依次被解析。在不使用 defer 和
async 屬性的情況下茁影,只有在解析完前面<script>元素中的代碼之后宙帝,才會(huì)開始解析后面
<script>元素中的代碼。
? 由于瀏覽器會(huì)先解析完不使用 defer 屬性的<script>元素中的代碼募闲,然后再解析后面的內(nèi)容步脓,
所以一般應(yīng)該把<script>元素放在頁(yè)面最后,即主要內(nèi)容后面浩螺,</body>標(biāo)簽前面沪编。
? 使用 defer 屬性可以讓腳本在文檔完全呈現(xiàn)之后再執(zhí)行。延遲腳本總是按照指定它們的順序執(zhí)行年扩。
? 使用 async 屬性可以表示當(dāng)前腳本不必等待其他腳本,也不必阻塞文檔呈現(xiàn)访圃。不能保證異步腳本按照它們?cè)陧?yè)面中出現(xiàn)的順序執(zhí)行厨幻。
? 使用<noscript>元素可以指定在不支持腳本的瀏覽器中顯示的替代內(nèi)容。但在啟用了腳本
的情況下腿时,瀏覽器不會(huì)顯示<noscript>元素中的任何內(nèi)容况脆。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市批糟,隨后出現(xiàn)的幾起案子格了,更是在濱河造成了極大的恐慌,老刑警劉巖徽鼎,帶你破解...
    沈念sama閱讀 218,941評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件盛末,死亡現(xiàn)場(chǎng)離奇詭異弹惦,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)悄但,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門棠隐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人檐嚣,你說(shuō)我怎么就攤上這事助泽。” “怎么了嚎京?”我有些...
    開封第一講書人閱讀 165,345評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵嗡贺,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我鞍帝,道長(zhǎng)诫睬,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,851評(píng)論 1 295
  • 正文 為了忘掉前任膜眠,我火速辦了婚禮岩臣,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘宵膨。我一直安慰自己架谎,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,868評(píng)論 6 392
  • 文/花漫 我一把揭開白布辟躏。 她就那樣靜靜地躺著谷扣,像睡著了一般。 火紅的嫁衣襯著肌膚如雪捎琐。 梳的紋絲不亂的頭發(fā)上会涎,一...
    開封第一講書人閱讀 51,688評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音瑞凑,去河邊找鬼末秃。 笑死,一個(gè)胖子當(dāng)著我的面吹牛籽御,可吹牛的內(nèi)容都是我干的练慕。 我是一名探鬼主播,決...
    沈念sama閱讀 40,414評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼技掏,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼铃将!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起哑梳,我...
    開封第一講書人閱讀 39,319評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤劲阎,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后鸠真,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體悯仙,經(jīng)...
    沈念sama閱讀 45,775評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡龄毡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了雁比。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片稚虎。...
    茶點(diǎn)故事閱讀 40,096評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖偎捎,靈堂內(nèi)的尸體忽然破棺而出蠢终,到底是詐尸還是另有隱情,我是刑警寧澤茴她,帶...
    沈念sama閱讀 35,789評(píng)論 5 346
  • 正文 年R本政府宣布寻拂,位于F島的核電站,受9級(jí)特大地震影響丈牢,放射性物質(zhì)發(fā)生泄漏祭钉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,437評(píng)論 3 331
  • 文/蒙蒙 一己沛、第九天 我趴在偏房一處隱蔽的房頂上張望慌核。 院中可真熱鬧,春花似錦申尼、人聲如沸垮卓。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)粟按。三九已至,卻和暖如春霹粥,著一層夾襖步出監(jiān)牢的瞬間灭将,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工后控, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留庙曙,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,308評(píng)論 3 372
  • 正文 我出身青樓浩淘,卻偏偏與公主長(zhǎng)得像捌朴,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子馋袜,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,037評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容