首頁 > 開發者 > JavaScript
在頁面腳步編寫中，初學者經常會碰到JavaScript放在頁面什麼地方的疑惑，網上答疑者給出的答案基本一致，這裡簡單作了一下整理，並分析一下為什麼要這樣和為什麼可以不這樣：
一、JavaScript代碼塊擺放規則：
head 部分中的指令碼: 需調用才執行的指令碼或事件觸發執行的指令碼放在HTML的head部分中。當你把指令碼放在head部分中時，可以保證指令碼在任何調用之前被載入。
<html>
<head>
<script type=”text/javascript”>
….
</script>
</head>
body 部分中的指令碼: 當頁面被載入時執行的指令碼放在HTML的body部分。放在body部分的指令碼通常被用來產生頁面的內容。
<html>
<head>
</head>
<body>
<script type=”text/javascript”>
….
</script>
</body>
body 和 head 部分可同時有指令碼:你可在檔案中放無數的指令碼，因此你的檔案中可以在body和head部分同時存在指令碼。
<html>
<head>
<script type=”text/javascript”>
….
</script>
</head>
<body>
<script type=”text/javascript”>
….
</script>
</body>
有時候你可能想在幾個頁面中運行同樣的指令碼程式， 而不需在各個頁面中重複的寫這些代碼。這時你就要用到外部指令碼。你可以把指令碼寫在一個外部檔案中，儲存在副檔名為 .js的檔案中。使用外部指令碼時將標記符<script> 的“src”屬性值指向相應的.js檔案就可以了：
<html>
<head>
<script src=”xxx.js”></script>
</head>
<body>
</body>
</html>
二、分析：
一定要這樣放嗎？只能說為了代碼的規範，最好這樣放，其實JavaScript可以任意放在頁面的任何地方，只要你遵循調用順序即可，具體說明如下：
比如有如下一段代碼：
<script language="javascript">
document.write("this is a test");
</script>
簡單的測試一下發現，類似這樣的代碼放在頁面的任何地方都不報錯，測試代碼如下：
<script language="javascript">
document.write("Brfore html<br>")
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<script language="javascript">;
document.write("In Head<br>")
</script>
</head>
<body>
BODY部分開始<br>
<script language="javascript">
document.write("In Body<br>")
</script>
BODY部分開始結束<br>
</body>
</html>
<script language="javascript">
document.write("After html<br>")
</script>
IE中執行結果如下:
Brfore html
In Head
BODY部分開始
In Body
BODY部分開始結束
After html
結論：
1． Javascript可以放在頁面的任何地方，它的載入順序與頁面的載入順序一致，頁面載入時，先載入head部分，後載入body部分，所以當把javascript代碼塊放在HTML前面時，它將先於head被載入，當放在head裡面時，它將先於body被載入，當放在頁面最後的的html之外時，它將最後被載入。
2． Javascript聲明的變數，定義的函數都是全域的，所以要特別注意訪問順序。比如在head部分訪問定義在body部分的變數或者函數，是不對的，因為head部分的javascript代碼執行時，body部分還未被載入進來。
3． 寫在body部分的javascript代碼如果要訪問頁面控制項，注意要放在被訪問控制項的HTML代碼下面，理由同2，因為要保證控制項先被載入，才能後被訪問。
4． 如果javascript是通過label或者literal之類的控制項綁出來的，調用時有可能會出錯，因為頁面body部分載入，並不是嚴格按照控制項擺放順序來載入的，所以先通過label綁定出來，在label後面的代碼中調用時，label可能並沒有載入完成。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
