JavaScript 放置

螞蟻小編發表於2018-05-22
JavaScript

理論上，JavaScript指令碼可以放置在頁面的任何位置。

比如放置在head或者body之中，甚至放置在html標籤之外都可以正常的執行。

一.放置於<head></head>標籤之間:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script> 
document.write("螞蟻部落"); 
</script>  
</head> 
<body> 
</body> 
</html>

將js程式碼插入到<head>與</head>之間；js程式碼需要用<script>標籤包裹。

二.放置於<body></body>標籤之間:

將js指令碼程式碼放置於<body></body>標籤之間可以避免指令碼程式碼找不到物件的情況。

舉個例子，如果在html頁面執行過程中遇到一段指令碼程式碼需要操作html中的元素<div id="test">。程式碼是順序執行的，執行這段指令碼程式碼的時候頁面還沒有載入<div id="test">，於是就出現找不到物件這種錯誤。如果把javascript指令碼程式碼放置在<body></body>標籤的最底端就可以避免這種情況。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script> 
var odiv = document.getElementById("ant");
odiv.innerHTML = "螞蟻部落";
</script> 
</head> 
<body> 
<div id="ant"></div>
</body> 
</html>

上面的程式碼無法獲取div元素，因為執行js程式碼的時候，div元素還沒有載入完成。

修改如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head> 
<body> 
<div id="ant"></div>
<script> 
var odiv = document.getElementById("ant");
odiv.innerHTML = "螞蟻部落";
</script> 
</body> 
</html>

上面的程式碼可以在div中寫入"螞蟻部落"。

三.匯入外部js檔案:

js程式碼量較大時，匯入外部js檔案一種比較好的方式。

當JavaScript程式碼量較大的時候，如果還是寫在html頁面內，頁面將會非常的龐大，不利於管理，所以把大量的javascript程式碼放入到一個獨立js檔案中，再將檔案匯入頁面將是一種好的選擇。

一般是放在<head></head>標籤之內。

引用方式:

[HTML] 純文字檢視 複製程式碼
<head>
<meta charset=" utf-8">
<title>螞蟻部落</title>
<script src="js.js"></script>
</head>

相關文章