資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學我應該在 HTML 的 body 部分還是 head 部分編寫我的指令碼？
在 HTML 中，指令碼標籤可以插入到 head 部分或 body 部分，通常 JavaScript 程式碼插入在 script 的開始和結束標籤之間。
<script> //JavaScript code here </script>
我們可以在 HTML 文件中插入任意數量的指令碼。指令碼可以放在 <body> 或 <head> 部分，或者同時放在兩者中。現在，讓我們看看如果我們將指令碼插入到 body 或 head 中是否有任何區別。
最好將 JavaScript 程式碼放在 <body> 結束標籤之前，而不是放在 HTML 的 <head> 部分。
HTML 總是遵循自上而下的方法來執行程式，如果我們在 head 部分編寫 JavaScript，則首先載入 JavaScript，然後是 HTML 程式碼，這會產生一些問題，例如：
如果 JavaScript 導致任何錯誤，接下來它將不會讀取我們的 HTML 內容，它會顯示錯誤。
如果 JavaScript 程式碼過多，那麼我們訪問的頁面顯示 HTML 內容的速度會變慢，因為所有 JavaScript 程式碼都在載入 HTML 之前載入，這會減慢伺服器速度。
為了克服這些缺點，最好在 body 結束括號之前編寫 JavaScript 程式碼。
示例
下面給出的示例試圖將段落的文字顏色更改為紅色，但顏色沒有更改，因為指令碼在段落標籤之前載入。
結果，在指令碼執行時段落元素不可用，因此顏色不會改變。
<html>
<head>
<script>
document.querySelector('#sample').style.color="red"
</script>
</head>
<body>
<p id="sample">
Changes the text of TutoriaslPoint to Red Color!
</p>
</body>
</html>
當我們執行上述程式時，我們會看到文字，顏色沒有變化。
示例
在下面的示例中，讓我們嘗試透過在 HTML 程式碼的 <body> 結束標籤之前新增 JavaScript 來更改程式碼。
<html>
<body>
<p id="sample">
Changes the text of TutoriaslPoint to Red Color!
</p>
<script>
document.querySelector('#sample').style.color="red"
</script>
</body>
</html>
當我們執行上述程式時，文字顏色會變為紅色，但是將 JavaScript 放在 HTML 的 <head> 中並不總是會導致錯誤。
因此，與 body 部分相比，很多時候在 head 部分編寫指令碼更好。使用者可以根據程式碼的使用情況和長度選擇編寫程式碼的位置。
示例
考慮另一個示例，以瞭解更多關於將 JavaScript 放置在 head 或 body 部分的資訊。
下面的示例演示了相反的情況，如果我們將 JavaScript 插入到 head 部分，則顏色會顯示，而在 body 部分則不會顯示。
<!DOCTYPE html>
<html>
<head>
<script>
function main() {
document.getElementById("sample").innerHTML = "Learning Script Tag";
}
</script>
</head>
<body>
<h2>Insert Script in Head Section</h2>
<p id="sample" style="color:blue;">TutorialsPoint</p>
<button type="button" onclick="main()">click it</button>
</body>
</html>
執行上述程式後，將顯示一個標題為“在 head 部分插入指令碼”的表單，以及一個 ID 屬性為 TutorialsPoint 和一個標記為“點選”的提交按鈕。
點選“點選它”按鈕後，將顯示以下頁面
示例
讓我們嘗試透過在 HTML 程式碼的 <body> 結束標籤之前新增 JavaScript 來更改程式碼。
<!DOCTYPE html>
<html>
<center>
<body>
<h2>Insert Script in Body Section</h2>
<p id="sample">TutoriaslPoint</p>
<button type="button" onclick="sample()">Click It</button>
<script>
function sample() {
document.getElementById("sample").innerHTML = "Learning Script Tag";
}
</script>
</body>
</center>
</html>
當我們執行上述程式時，我們看到對齊方式發生了變化，ID 屬性、按鈕和標題都居中對齊。此外，文字顏色不會更改，因為程式碼沒有影響段落的顏色。
點選“點選它”按鈕後，將顯示以下頁面
652 次瀏覽
