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