JavaScript應放在頁面的什麼地方

來源:互聯網
上載者:User

    在頁面腳步編寫中,初學者經常會碰到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可能並沒有載入完成。

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。