逐步解說：JScript IntelliSense

發行項
08/12/2011

在此逐步解說中，您將使用 IntelliSense 來支援 Visual Studio 內的用戶端指令碼開發。 IntelliSense 讓語言參考更容易存取。在編寫程式碼時，不需離開程式碼編輯器即可執行語言項目的搜尋，例如語法或參數清單。取而代之的是，保持在編輯模式即可尋找所需的資訊，並將語言項目直接插入程式碼中。Visual Studio 支援 Microsoft JScript 及其他 ECMAScript 語言 (如 JavaScript) 的 IntelliSense。

注意事項
本文件所提的部分是特別針對 Jscript。不過，Visual Studio 和 Visual Web Developer 內的 IntelliSense 可搭配所有 ECMAScript 語言使用，其中包括 JavaScript。

Visual Studio 支援下列功能的 IntelliSense：

DHTML 文件物件模型 (Document Object Model，DOM) 項目。
內建物件。
使用者定義的變數、函式和物件。
外部檔案參考。
XML 程式碼註解。
ASP.NET AJAX 物件。

如需 Visual Studio 內 IntelliSense 功能的詳細資訊，請參閱使用 IntelliSense。如需 JScript 之 IntelliSense 的詳細資訊，請參閱 JScript IntelliSense 概觀。

必要條件

您需要使用下列元件完成此逐步解說：

Visual Studio 2010 或 Microsoft Visual Web Developer Express。

建立網站和網頁

若要開始進行，請建立 ASP.NET 網站，並納入支援的物件、參考和指令碼。如果已經建立了網站 (例如，藉由遵循逐步解說：建立新的 ASP.NET 網站中的步驟建立)，您就可以使用該網站並繼續進行本逐步解說下一節的步驟。否則，請依下列步驟建立新的網站和網頁。

建立 Web 應用程式

開啟 Visual Studio 2010 或 Microsoft Visual Web Developer Express。
在 [檔案] 功能表上，按一下 [新網站]。

[新網站] 對話方塊便會顯示。
請在 [Visual Studio 安裝的範本] 下方，按一下 [ASP.NET 網站]。
從 [位置] 清單中選取 [檔案系統]。
在 [位置] 清單旁的方塊中，輸入您想要用來保存網站網頁的資料夾名稱。

例如，輸入下列資料夾名稱：C:\IntellisenseWebSite1
從 [語言] 清單中按一下 [Visual Basic] 或 [Visual C#]，然後按一下 [確定]。

您所選取的程式語言將會成為建立網站伺服器端程式碼的預設語言。在本逐步解說中，這個選擇並不重要，因為您只會用到在瀏覽器中執行的用戶端指令碼。

Visual Web Developer 會建立資料夾和名稱為 Default.aspx 的新網頁。根據預設，在建立新網頁時，Visual Web Developer 會在 [原始碼] 檢視內顯示網頁，您可以在其中檢視網頁的 HTML 項目。

在網頁內加入控制項和 JScript 程式碼

您現在就可以將控制項和 JScript 程式碼加入至 Default.aspx 網頁。

若要加入控制項和 JScript 程式碼

按一下 [設計] 索引標籤切換至 [設計] 檢視。
從 [工具箱] 的 [AJAX 擴充功能] 索引標籤中，將 UpdatePanel 控制項拖曳至網頁上。
從 [工具箱] 的 [標準] 索引標籤中，將下列控制項拖曳至網頁上：
- Label 控制項，用以顯示標題。
- Button 控制項，用以計算容量。
- Label 控制項和 TextBox 控制項，用以顯示標題和提供輸入。
- Label 控制項和 TextBox 控制項，用以顯示標題和輸出。
將控制項的 Text 屬性設為下列值：
- Button1：Calculate
- Label2：Radius Input
- Label3：Volume Output
按一下 [原始碼] 索引標籤，切換至 [原始碼] 檢視。

將下列反白顯示的指令碼參考加入至 asp:ScriptManager 項目：

<asp:ScriptManager ID="ScriptManager1" runat="server">
  <Scripts>
    <asp:ScriptReference Path="JScript.js" />
  </Scripts>
</asp:ScriptManager>

在 [方案總管] 中，以滑鼠右鍵按一下網站名稱，然後按一下 [加入新項目]。

接著會顯示 [加入新項目] 對話方塊。
在 [Visual Studio 安裝的範本] 下方，選取 [ JScript 檔]，然後按一下 [加入]。

Visual Studio 會建立並開啟名為 JScript.js 的新檔案。

注意事項

.js 檔的名稱必須符合在 asp:ScriptManager 項目中之指令碼參考內所出現的名稱。

注意事項
.js 檔的名稱必須符合在 asp:ScriptManager 項目中之指令碼參考內所出現的名稱。

將下列程式碼加入至 JScript.js 檔案：

function calcVolume(areaValue)
{
  /// <summary>Determines the volume of a cicle based on an area parameter.</summary>
  /// <param name="area" type="Number">The area of the circle.</param>
  /// <returns type="Number">Returns a number that represents the area.</returns>
  var volumeVal;
  volumeVal = Math.pow(areaValue,3);
  return volumeVal;
}

儲存並關閉 JScript.js 檔案。

檢視 JScript IntelliSense

JScript IntelliSense 用於顯示與許多種用戶端物件類型相關的詳細資料，例如 Dynamic HTML (DHTML) 文件物件模型 (DOM) 項目、內建物件，以及使用者定義的物件。您也可以使用 IntelliSense 來顯示與 XML 註解指令碼有關的資訊，以及與 Microsoft AJAX Library 物件有關的資訊。

若要檢視 JScript IntelliSense

切換或開啟 Default.aspx 網頁，然後切換至 [原始碼] 檢視。
在 form 項目的結尾加入下列 script 項目：
```
<script type="text/javascript">

</script>
```
在 script 項目內部輸入下列指令碼：
```
var displayTitle = document.
```
當您輸入句號 (.) 時，編輯器會顯示適用於 document 物件的 IntelliSense 選項。
捲動至 getElementById 方法並按一下該方法或按下 ENTER，將 getElementById 方法加入指令碼中。
輸入要尋找的項目名稱完成指令碼行，此時該行的內容顯示如下：
```
var displayTitle = document.getElementById("Label1");
```
加入下列指令碼行，在 Label1 內顯示標題：
```
displayTitle.innerHTML = "Calculate Volume";
```
將下列不完整的函式加入至 script 項目的結尾：
```
function calcArea(radiusParam)
{

}
```
在 calcArea 函式中，輸入下列指令碼：
```
  var areaVal = Math.
```
當您輸入句號 (.) 時，編輯器會顯示適用於 Math 內建物件的 IntelliSense 選項。
捲動至 PI 屬性並按下 ENTER，將 PI 屬性加入指令碼。

完成指令碼，此時函式顯示如下：

function calcArea(radiusParam)
{
  var areaVal = Math.PI * radiusParam * radiusParam;
  return areaVal;
}

將下列不完整的函式加入至 script 項目的結尾：
```
function displayVolume()
{

}
```
在 displayVolume 函式中，輸入下列指令碼：
```
  radiusVal = $get("TextBox1").value;
  var areaVal = calcArea(
```
當您輸入左括號時，編輯器會顯示與您稍早所建立之 calcArea 函式參數值有關的 IntelliSense 資訊。
完成指令碼行，此時指令碼顯示如下：
```
  var areaVal = calcArea(radiusVal);
```
輸入下列指令碼，繼續加入 displayVolume 函式：
```
  var volumeVal = calcVolume(
```
當您輸入左括號時，編輯器會使用 IntelliSense 來顯示 XML 程式碼註解，這個註解是根據您稍早建立的 calcVolume 所產生的。

完成 displayVolume 函式，此時函式顯示如下：

function displayVolume()
{
  radiusVal = $get("TextBox1").value;
  var areaVal = calcArea(radiusVal);
  var volumeVal = calcVolume(areaVal);
  $get("TextBox2").value = areaVal;
}

注意事項
$get 方法是 ASP.NET AJAX 函式，提供了 Sys.UI.DomElement 類別之 getElementById 方法的捷徑。

在 script 的結尾輸入下列指令碼行：
```
$addHandler(
```
當您輸入左括號時，編輯器會顯示 ASP.NET AJAX $addHandler 方法的 IntelliSense。
完成指令碼行，此時指令碼顯示如下：
```
$addHandler($get("Button1"), "click", displayVolume);
```
請確認這一行位於 </script> 標記之內，但不位於 displayVolume 函式之內。

注意事項

$addHandler 方法是 ASP.NET AJAX 函式，提供了 Sys.UI.DomEvent 類別之 addHandler 方法的捷徑。
儲存網頁，然後按 CTRL+F5 予以執行。
輸入半徑值，然後按一下按鈕。

您在 JScript 內建立之計算的結果會顯示在第二個文字方塊中。

注意事項
$addHandler 方法是 ASP.NET AJAX 函式，提供了 Sys.UI.DomEvent 類別之 addHandler 方法的捷徑。

後續步驟

本逐步解說說明了如何使用 JScript IntelliSense。您可能想進一步了解如何在 Visual Studio 內使用用戶端指令碼。如需詳細資訊，請參閱 ASP.NET AJAX Roadmap。如需 JScript IntelliSense 的詳細資訊，請參閱 JScript IntelliSense 概觀。

請參閱

共用方式為