JavaScript 是一種被廣泛應用于前端開發的編程語言。它通過操作 DOM 和 CSS 等方式來動態地控制頁面，讓網頁交互性更加豐富。在 JavaScript 中，可以通過外部變量賦值的方式，動態地改變頁面的樣式和行為。本文將會從實際應用出發，講解 JavaScript 中的外部變量賦值。
在 JavaScript 中，我們可以通過外部變量來實現改變網頁樣式和行為的目的。首先，我們需要在 HTML 中引入 JavaScript 文件，例如：
<script src="main.js"></script>
這樣就可以在 JavaScript 中訪問 HTML 中的元素了。下面，我們將通過一個例子來說明外部變量的使用。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 外部變量賦值示例</title>
<script src="main.js"></script>
</head>
<body>
<button onclick="changeColor()">改變背景顏色</button>
<script>
var bgColor = "white";
function changeColor() {
if (bgColor === "white") {
document.body.style.backgroundColor = "lightblue";
bgColor = "lightblue";
} else {
document.body.style.backgroundColor = "white";
bgColor = "white";
}
}
</script>
</body>
</html>上面的代碼中，我們定義了一個變量 bgColor，用來記錄當前的背景顏色。在 changeColor 函數中，我們判斷當前的背景顏色是白色還是藍色，然后分別執行不同的操作：
if (bgColor === "white") {
document.body.style.backgroundColor = "lightblue";
bgColor = "lightblue";
} else {
document.body.style.backgroundColor = "white";
bgColor = "white";
}這樣，每次點擊按鈕，就可以切換背景顏色了。需要注意的是，變量必須在函數外部聲明。如果在函數內部聲明變量，那么變量只會在函數內部生效。
除了改變背景顏色，我們還可以通過外部變量賦值來控制 HTML 中的元素。下面就是一個例子，展示如何通過外部變量賦值做出菜單效果：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 外部變量賦值示例</title>
<script src="main.js"></script>
<style>
.menu-item {
display: none;
}
</style>
</head>
<body>
<button onclick="toggleMenu()">菜單</button>
<ul id="menu">
<li class="menu-item">菜單一</li>
<li class="menu-item">菜單二</li>
<li class="menu-item">菜單三</li>
</ul>
</body>
</html>代碼中，我們定義了一個樣式，將菜單項隱藏起來：
.menu-item {
display: none;
}然后通過 JavaScript 來控制菜單項的顯示和隱藏，代碼如下：
var menuVisible = false;
function toggleMenu() {
var menuItems = document.querySelectorAll(".menu-item");
for (var i = 0; i< menuItems.length; i++) {
if (menuVisible) {
menuItems[i].style.display = "none";
} else {
menuItems[i].style.display = "block";
}
}
menuVisible = !menuVisible;
}在 toggleMenu 函數中，首先獲取所有的菜單項，然后判斷菜單的顯示狀態。如果菜單項當前為顯示狀態，那么將菜單項隱藏起來，否則將菜單項顯示出來。需要注意的是，菜單項的顯示狀態由外部變量 menuVisible 控制。
總之，JavaScript 中的外部變量賦值非常重要，它可以幫助我們動態地改變網頁的樣式和行為。當然，對于外部變量的使用要注意變量作用域、變量聲明和變量類型等問題，這樣才能讓代碼更加健壯和可維護。