2.在HTML中使用JavaScript

1.<script>元素

這個元素由Netscape創(chuàng)造并在Netscape Navigator實(shí)現(xiàn)
HTML4.01為<script>定義了下列6個屬性:

async:可選。表示立即下載該腳本,但不妨礙頁面中的其他操作治唤,比如下載其他資源或等待加載其他腳本氓癌。只對外部腳本文件有效睡腿。
charset:可選懊烤。表示通過src屬性指定的代碼的字符集磅崭。由于大多數(shù)瀏覽器會忽略它的值御吞,因?yàn)楹苌儆腥擞谩?defer:可選麦箍。表示腳本可以延遲到文檔完全被解析和顯示之后再執(zhí)行。只對外部腳本文件有效陶珠。IE7及更早版本對嵌入腳本也支持這個屬性挟裂。
src:可選。表示包含要執(zhí)行代碼的外部文件揍诽。
type:可選诀蓉。可以看成是language的替代屬性(表示編碼代碼使用的腳本語言的內(nèi)容類型暑脆,即MIME類型);一般可以不用指定渠啤,默認(rèn)為text/javascript。

使用:1.頁面嵌入javascript代碼/2.包含外部JavaScript文件添吗。
解釋:從上至下沥曹。在解釋器對<script>元素內(nèi)部的所有代碼求值完畢以前,頁面中的其余內(nèi)容不會被瀏覽器加載或顯示碟联。
解析:從上至下妓美,不過受defer和async干擾。

注意:
不要在<script>標(biāo)簽內(nèi)任何地方出現(xiàn)"</script>"字符串鲤孵。想使用壶栋,就要加轉(zhuǎn)義。<\/script>
解析js代碼時普监,頁面的處理會暫時停止
XHTML文檔中贵试,</script>可以省略
外部js文件的.js拓展名不是必需的,所以JSP鹰椒、PHP等可以動態(tài)生成js代碼使用锡移。瀏覽器不強(qiáng)制要js拓展名,但它根據(jù)拓展名決定為響應(yīng)應(yīng)用哪種MIME類型漆际,需要確保服務(wù)器能返回正確的MIME類型淆珊。

1.1 標(biāo)簽的位置

傳統(tǒng)做法:<script>放在<head>元素中。

意味必須等到全部JS代碼下載完成奸汇。缺點(diǎn)是js代碼多會延遲施符。貌似可以一窺前端的變化:js操作越來越多往声,互聯(lián)網(wǎng)發(fā)展速度跟不上js需求,才會延遲戳吝,不然可以老辦法走到頭浩销。
現(xiàn)在:放在<body>尾部。

1.2 延遲腳本

最好只包含一個延遲腳本听哭,因?yàn)楝F(xiàn)實(shí)中可能不按順序慢洋,也不一定在DOMContentLoaded事件觸發(fā)之前執(zhí)行
H5會忽略嵌入腳本內(nèi)的defer

1.3 異步腳本

指定anync屬性的目的是不讓頁面等待腳本下載和執(zhí)行,從而異步加載頁面其他內(nèi)容陆盘。為此普筹,建議異步腳本不要在加載期間修改DOM。
異步腳本一定會在頁面的load事件前執(zhí)行隘马,可能會在DOMContentLoaded事件觸發(fā)之前或之后執(zhí)行太防。

1.4 在XHTML中的用法

1.5 不推薦使用的語法

已經(jīng)是歷史問題了,當(dāng)時還有不支持js的瀏覽器

2 嵌入代碼與外部文件

支持外部引入有以下有點(diǎn):

可維護(hù)性:不同頁面js維護(hù)麻煩酸员。
可緩存
適應(yīng)未來:無需使用XHTML和注釋hack

3 文檔模式

略蜒车,這一節(jié)沒提具體的差異

4 <noscript>元素

解決歷史問題的,只有以下情況才會顯示

瀏覽器不支持腳本
瀏覽器支持腳本幔嗦,但腳本被禁用

5 小結(jié)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末酿愧,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子崭添,更是在濱河造成了極大的恐慌寓娩,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件呼渣,死亡現(xiàn)場離奇詭異棘伴,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)屁置,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進(jìn)店門焊夸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蓝角,你說我怎么就攤上這事阱穗。” “怎么了使鹅?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵揪阶,是天一觀的道長。 經(jīng)常有香客問我患朱,道長鲁僚,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮冰沙,結(jié)果婚禮上侨艾,老公的妹妹穿的比我還像新娘。我一直安慰自己拓挥,他們只是感情好唠梨,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著侥啤,像睡著了一般当叭。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上愿棋,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天科展,我揣著相機(jī)與錄音,去河邊找鬼糠雨。 笑死,一個胖子當(dāng)著我的面吹牛徘跪,可吹牛的內(nèi)容都是我干的甘邀。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼垮庐,長吁一口氣:“原來是場噩夢啊……” “哼松邪!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起哨查,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤逗抑,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后寒亥,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體邮府,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年溉奕,在試婚紗的時候發(fā)現(xiàn)自己被綠了褂傀。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡加勤,死狀恐怖仙辟,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情鳄梅,我是刑警寧澤叠国,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站戴尸,受9級特大地震影響粟焊,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一吆玖、第九天 我趴在偏房一處隱蔽的房頂上張望筒溃。 院中可真熱鬧,春花似錦沾乘、人聲如沸怜奖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽歪玲。三九已至,卻和暖如春掷匠,著一層夾襖步出監(jiān)牢的瞬間滥崩,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工讹语, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留钙皮,地道東北人。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓顽决,卻偏偏與公主長得像短条,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子才菠,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評論 2 361

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