摘要:使用元素嵌入代碼時(shí),只需為指定屬性。需要注意的是,帶有屬性的元素不應(yīng)該在其和元素之間再包含額外的代碼。在包含外部文件時(shí),必須將屬性設(shè)置為指向相應(yīng)文件的。所有元素都會(huì)按照他們?cè)陧?yè)面中出現(xiàn)的先后順序依次被解析。關(guān)注,獲取最新動(dòng)態(tài)。
當(dāng)學(xué)習(xí)一門新的編程語言的時(shí)候,應(yīng)該邊學(xué)邊做,反復(fù)演練以加深理解。因此,你需要一個(gè) JavaScript 解釋器。幸運(yùn)的是,每一個(gè) Web 瀏覽器都包含一個(gè) JavaScript 解釋器。
可以通過在 HTML 文件里寫一個(gè) 元素來嵌入 JavaScript 代碼,當(dāng)瀏覽器加載 HTML 文件的時(shí)候,它會(huì)自動(dòng)執(zhí)行這段代碼。如果運(yùn)行的是一小段 JavaScript 代碼,則不必每次都這樣做。我們可以利用 Chrome 瀏覽器的「開發(fā)者工具」來運(yùn)行這些小段代碼,通常按 F12 或者 Ctrl+Shift+J 快捷鍵可以喚醒控制臺(tái)。
元素現(xiàn)代瀏覽器可以使用函數(shù) console.log() 來向控制臺(tái)輸出消息,通過這種方式可以非常方便地調(diào)試代碼。
使用 元素的方式有兩種:
直接在頁(yè)面中嵌入 JavaScript 代碼。
包含外部 JavaScript 文件。
使用 元素嵌入 JavaScript 代碼時(shí),只需為 指定 type 屬性。然后,像下面這樣把 JavaScript 代碼直接放在元素內(nèi)部即可:
在 HTML5 規(guī)范中, 的 type 屬性默認(rèn)是 "text/javascript",所以可以省略;但是在 HTML 4.01 和 XHTML 1.0 規(guī)范中,type 屬性是必須的??梢詤⒖?Stack Overflow 上的回答:http://stackoverflow.com/ques...
如果要通過 元素來包含外部 JavaScript 文件,那么 src 屬性就是必需的。這個(gè)屬性的值是一個(gè)指向外部 JavaScript 文件的鏈接,例如:
包含在 元素內(nèi)部的 JavaScript 代碼將被從上至下依次解釋,在解釋器對(duì) 元素內(nèi)部的所有代碼求值完畢之前,頁(yè)面中的其余內(nèi)容都不會(huì)被瀏覽器加載或顯示。
需要注意的是,帶有 src 屬性的 元素不應(yīng)該在其 和 元素之間再包含額外的 JavaScript 代碼。如果包含了嵌入的代碼,則只會(huì)下載并執(zhí)行外部腳本文件,嵌入的代碼會(huì)被忽略。
另外,通過 元素的 src 屬性還可以包含來自外部域的 JavaScript 文件。例如:
元素的位置在 HTML 中嵌入 JavaScript 代碼雖然沒有問題,但一般認(rèn)為最好的做法還是盡可能使用外部文件來包含 JavaScript 代碼。
按照慣例,所有的 元素都應(yīng)該放在頁(yè)面的 元素中,例如:
Document
可是這種做法意味著必須等到全部 JavaScript 代碼都被下載、解析和執(zhí)行完成之后,才能開始呈現(xiàn)頁(yè)面的內(nèi)容(瀏覽器在遇到 元素時(shí)才開始呈現(xiàn)內(nèi)容)。對(duì)于那些需要加載很多 JavaScript 代碼的頁(yè)面來說,會(huì)導(dǎo)致頁(yè)面出現(xiàn)明顯的延遲(瀏覽器窗口一片空白)。為了避免這個(gè)問題,最好的做法是把 元素放到 HTML 文檔的最后面, 元素之前,例如:
小結(jié)Document
把 JavaScript 插入到 HTML 頁(yè)面中要使用 元素。使用這個(gè)元素可以把 JavaScript 嵌入到 HTML 頁(yè)面中,讓腳本和標(biāo)記混合在一起;也可以包含外部的 JavaScript 文件。
在包含外部 JavaScript 文件時(shí),必須將 src 屬性設(shè)置為指向相應(yīng)文件的 URL。而這個(gè)文件既可以是本服務(wù)器上的文件,也可以是其他任何域中的文件。
所有 元素都會(huì)按照他們?cè)陧?yè)面中出現(xiàn)的先后順序依次被解析。
關(guān)卡現(xiàn)有一個(gè)網(wǎng)頁(yè)(代碼如下),引用了大量的外部 JavaScript 文件,打開該網(wǎng)頁(yè)會(huì)一直顯示空白,直至外部 JavaScript 文件全部下載完畢,才能正常顯示網(wǎng)頁(yè)內(nèi)容「本頁(yè)面用來測(cè)試 加載順序~」,用戶體驗(yàn)不好。請(qǐng)嘗試修改頁(yè)面中 元素的位置,實(shí)現(xiàn)以下效果:
挑戰(zhàn)一:實(shí)現(xiàn)打開頁(yè)面就能看到網(wǎng)頁(yè)內(nèi)容「本頁(yè)面用來測(cè)試 加載順序~」,不必等外部 JavaScript 文件全部下載完畢才顯示。
挑戰(zhàn)二:實(shí)現(xiàn)在外部 JavaScript 文件下載之前「開啟頁(yè)面加載效果」,外部 JavaScript 文件全部下載完畢之后「關(guān)閉頁(yè)面加載效果」。
最終效果可參考 http://shijiajie.com/other/ja...
javascript-lesson-1.2 本頁(yè)面用來測(cè)試