JavaScript 放在哪裡?
JavaScript 放在哪裡
剛才我們寫(xiě)了第一個(gè)JavaScript 程序,強(qiáng)調(diào)JavaScript 程式碼必須放置在?<script>…< /script>?標(biāo)籤裡。
我們把包含程式碼的?<script>…</script>?標(biāo)籤放在了?<body>…</body>?標(biāo)籤裡。其實(shí)不只可以這樣做,我們還有另外兩種方式在 HTML 中使用 JavaScript 。
head 中的JavaScript
我們除了可以把包含程式碼的?<script>?標(biāo)籤放在?<body>…</body>?標(biāo)籤裡,還可以把它放在<head>…</head>?標(biāo)籤裡,例如這樣:
<html> <head> <h1> JavaScript in head. </h1> <script> alert("hello word!"); </script> </head> <body></body> </html>
這個(gè)程式的執(zhí)行結(jié)果和剛才的沒(méi)什麼不同,但其實(shí)把JavaScript 程式碼放在?<head></head> ;?和放在?<body></body>?裡是有差別的:
簡(jiǎn)單來(lái)說(shuō),放在?<head></head>?裡的會(huì)比較放在?<body> </body>?先執(zhí)行。 head 標(biāo)籤裡的程式碼會(huì)在頁(yè)面還未開(kāi)始繪製之前被解析,而在 body 裡的程式碼則會(huì)在頁(yè)面渲染的同時(shí)在讀取到這段程式碼的時(shí)候才執(zhí)行。
外部的JavaScript
除了直接把JavaScript 程式碼寫(xiě)在HTML 裡,我們還可以把JavaScript 的程式碼寫(xiě)在一個(gè)js 檔案中,在HTML 裡呼叫這個(gè)js 檔案。我們還是以「hello world」舉例。
在實(shí)驗(yàn)大樓環(huán)境中,儲(chǔ)存以下程式碼並命名為“out.js”,放在桌面上:
alert("hello word!");
把以下程式碼儲(chǔ)存並命名為“test2.html”,放在桌面:
<html> <head> <h1> my JavaScript code in "out.js" </h1> </head> <body> <script src="out.js"></script> </body> </html>
同樣,雙擊桌面上的“test2.html”文件,呼叫瀏覽器運(yùn)行,你會(huì)發(fā)現(xiàn)運(yùn)行效果和前兩個(gè)程序也沒(méi)什麼差別。
其實(shí),前兩種方式都是直接把 JavaScript 程式碼放在 HTML 中,在頁(yè)面載入的同時(shí),那些 JavaScript 的程式碼就被解析了。而把 JavaScript 程式碼放在外部檔案中,只有在事件被觸發(fā),需要該段 JavaScript 程式碼時(shí),才會(huì)呼叫執(zhí)行。
這樣做有個(gè)好處,當(dāng)頁(yè)面比較複雜的時(shí)候,把大量的 JavaScript 程式碼放到外部文件,只有在需要的時(shí)候才執(zhí)行,那麼會(huì)明顯地加快頁(yè)面載入速度。
在一個(gè) HTML 檔案中,不同位置加入不同的 JavaScript 程式碼,執(zhí)行觀察不同位置的 JavaScript 程式碼執(zhí)行的順序。
參考如下,觀察彈框順序:
<html> <head> <script> alert("in head"); </script> </head> <body> <script> alert("in body"); </script> </body> </html>