JavaScript 放在哪裡？

JavaScript 放在哪裡

剛才我們寫了第一個JavaScript 程序，強調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>

這個程式的執行結果和剛才的沒什麼不同，但其實把JavaScript 程式碼放在 <head></head> ; 和放在 <body></body> 裡是有差別的：

簡單來說，放在 <head></head> 裡的會比較放在 <body> </body> 先執行。 head 標籤裡的程式碼會在頁面還未開始繪製之前被解析，而在 body 裡的程式碼則會在頁面渲染的同時在讀取到這段程式碼的時候才執行。

外部的JavaScript

除了直接把JavaScript 程式碼寫在HTML 裡，我們還可以把JavaScript 的程式碼寫在一個js 檔案中，在HTML 裡呼叫這個js 檔案。我們還是以「hello world」舉例。

在實驗大樓環境中，儲存以下程式碼並命名為“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”文件，呼叫瀏覽器運行，你會發現運行效果和前兩個程序也沒什麼差別。

其實，前兩種方式都是直接把 JavaScript 程式碼放在 HTML 中，在頁面載入的同時，那些 JavaScript 的程式碼就被解析了。而把 JavaScript 程式碼放在外部檔案中，只有在事件被觸發，需要該段 JavaScript 程式碼時，才會呼叫執行。

這樣做有個好處，當頁面比較複雜的時候，把大量的 JavaScript 程式碼放到外部文件，只有在需要的時候才執行，那麼會明顯地加快頁面載入速度。

在一個 HTML 檔案中，不同位置加入不同的 JavaScript 程式碼，執行觀察不同位置的 JavaScript 程式碼執行的順序。

參考如下，觀察彈框順序：

<html>
<head>
<script>
alert("in head");
</script>
</head>
<body>
<script>
alert("in body");
</script>
</body>
</html>

繼續學習

新建檔案

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title> RunJS 演示代码 </title> <script> var ck = function(){ var x = prompt ("输入数据: ", ""); alert(x); } </script> </head> <body> <button onclick="ck();"> 输入按钮 </button> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear