JavaScript是一種用于Web開發的編程語言，它具有動態性、交互性和易用性等特點，現在已經成為Web應用即時更新和交互的重要工具之一。在網頁開發中經常需要獲取頁面元素的值，而JavaScript就是用于讀取控件值的重要工具。

在實際操作中，JavaScript可以讀取各種不同類型的控件的值，例如文本框、單選按鈕、多選框、下拉框等等。對于文本框的讀取，我們可以使用以下代碼：

var name = document.getElementById("nameInput").value;

上述代碼中，通過getElementById方法獲取nameInput元素的值，并將其賦值給變量name。同樣的，如果要獲取單選按鈕的值，可以使用以下代碼：

var sex = document.querySelector("input[name='sex']:checked").value;

上述代碼中，通過querySelector方法選擇性別單選按鈕，并獲取選中的值。

多選框的讀取值和單選按鈕的讀取類似，只不過需要進行循環遍歷獲取選中的值，例如：

var hobby = [];
var chkBox = document.getElementsByName("hobby");
for (var i = 0; i < chkBox.length; i++) {
if (chkBox[i].checked) {
hobby.push(chkBox[i].value);
}
}

上述代碼中，通過getElementsByName方法選擇所有名稱為“hobby”的多選框，并使用循環遍歷選中的多選框，將選中的值存儲在數組hobby中。

下拉框的讀取有兩種方式，一種是通過selectedIndex屬性獲取當前選中項的索引，另一種是通過value屬性獲取當前選中項的值，例如：

var province = document.getElementById("provinceSelect");
var provinceIndex = province.selectedIndex;
var provinceName = province.options[provinceIndex].text;
var provinceValue = province.options[provinceIndex].value;

上述代碼中，通過getElementById方法選擇名稱為provinceSelect的下拉框，并使用selectedIndex屬性獲取當前選中項的索引，options屬性獲取選項列表，然后使用text屬性獲取選中項的文本內容，value屬性獲取選中項的值。

總體而言，JavaScript可以輕松地讀取各種控件的值，并將其進行進一步處理和展示。掌握JavaScript讀取控件值的方法是Web開發中的必備技能之一，這樣可以讓我們更加靈活地操作頁面元素，實現有趣的交互效果。