演练：JScript IntelliSense

在此演练中，将使用 IntelliSense 以在 Visual Studio 中支持客户端脚本开发。 IntelliSense 使访问语言参考变得轻松自如。 在编码时，不必为搜索语言元素（如语法或参数列表）而脱离代码编辑器。 而是可以在编辑模式下查找所需信息，以及直接向代码中插入语言元素。Visual Studio 对 Microsoft JScript 和类似 JavaScript 的其他 ECMAScript 语言支持 IntelliSense。

提示

此文档特别与 Jscript 有关。 但是，Visual Studio 和 Visual Web Developer 中的 IntelliSense 适用于所有 ECMAScript 语言，其中包括 JavaScript。

Visual Studio 针对以下功能支持 IntelliSense：

• DHTML 文档对象模型 (DOM) 元素。

• 内部对象。

• 用户定义的变量、函数和对象。

• 外部文件引用。

• XML 代码注释。

• ASP.NET AJAX 对象。

有关 Visual Studio 中的 IntelliSense 功能的更多信息，请参见使用 IntelliSense。 有关 JScript IntelliSense 的信息，请参见 JScript IntelliSense 概述。

系统必备

为了完成本演练，您需要以下组件：

• Visual Studio 2010 或 Microsoft Visual Web Developer 速成版。

创建网站和网页

首先，将创建一个 ASP.NET 网站，并添加支持对象、引用和脚本。 如果已经创建了一个网站（例如，按照演练：创建新的 ASP.NET 网站中的步骤创建了一个网站），则可以使用该网站并转到本演练的下一节。 否则，按照下面的步骤创建一个新的网站和网页。

创建 Web 应用程序

1. 打开 Visual Studio 2010 或 Microsoft Visual Web Developer 速成版。

2. 在**“文件”菜单上单击“新建网站”**。

   显示**“新建网站”**对话框。

3. 在**“Visual Studio 已安装的模板”下单击“ASP.NET 网站”**。

4. 从**“位置”列表中，选择“文件系统”**。

5. 在**“位置”**列表旁边的框中键入要保存网站网页的文件夹的名称。

   例如，键入以下文件夹名称：C:\IntellisenseWebSite1

6. 从**“语言”列表中，单击“Visual Basic”或“Visual C#”，然后单击“确定”**。

   选择的编程语言将是为网站创建基于服务器的代码的默认语言。 在此演练中，此选择并不重要，因为您将只使用在浏览器中运行的客户端脚本。

   Visual Web Developer 将创建该文件夹和名为 Default.aspx 的新页。 默认情况下，在创建新页时，Visual Web Developer 将在“源”视图中显示此页，您可以在该视图中查看此页的 HTML 元素。

向页中添加控件和 JScript 代码

现在，将向 Default.aspx 页中添加控件和 JScript 代码。

添加控件和 JScript 代码

1. 单击**“设计”**选项卡切换到“设计”视图。

2. 从**“工具箱”的“AJAX Extensions”**选项卡中，将一个 UpdatePanel 控件拖到该页上。

3. 从**“工具箱”的“标准”**选项卡中，将以下控件拖到该页上：

   • 用于标题的 Label 控件。

   • 用于计算体积的 Button 控件。

   • 用于标题和输入的 Label 控件和 TextBox 控件。

   • 用于标题和输出的 Label 控件和 TextBox 控件。

4. 将控件的 Text 属性设置为以下值：

   • Button1：计算

   • Label2：半径输入

   • Label3：体积输出

5. 单击**“源”**选项卡切换到“源”视图。

6. 将下面突出显示的脚本引用添加到 asp:ScriptManager 元素中：

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

7. 在**“解决方案资源管理器”中，右击网站名称，然后单击“添加新项”**。

   显示**“添加新项”**对话框。

8. 在**“Visual Studio 已安装的模板”之下选择“JScript 文件”，然后单击“添加”**。

   Visual Studio 将创建并打开一个名为 JScript.js 的新文件。

   提示

   .js 文件的名称必须与 asp:ScriptManager 元素内的脚本引用中显示的名称相匹配。

9. 将下面的代码添加到 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;
   }
   

10. 保存并关闭此 JScript.js 文件。

查看 JScript IntelliSense

JScript IntelliSense 用于显示诸如动态 HTML (DHTML) 文档对象模型 (DOM) 元素、内部对象以及用户定义的对象等多种类型的客户端对象的详细信息。 您也可以使用 IntelliSense 来显示有关 XML 注释脚本和 Microsoft AJAX Library 对象的信息。

查看 JScript IntelliSense

1. 切换到或打开 Default.aspx 页并切换到“源”视图。

2. 在 form 元素末尾添加以下 script 元素：

   <script type="text/javascript">
   
   </script>
   

3. 在 script 元素内部，键入以下脚本：

   var displayTitle = document.
   

   在键入句点 (.) 时，编辑器将显示适用于 document 对象的 IntelliSense 选项。

4. 滚动到 getElementById 方法，并单击此方法或按 Enter 以向脚本添加 getElementById 方法。

5. 键入要查找的元素的名称以完成脚本行，使此行显示如下：

   var displayTitle = document.getElementById("Label1");
   

6. 添加以下脚本行以在 Label1 中显示标题：

   displayTitle.innerHTML = "Calculate Volume";
   

7. 将以下不完整的函数添加到 script 元素的末尾：

   function calcArea(radiusParam)
   {
   
   }
   

8. 在 calcArea 函数中，键入以下脚本：

     var areaVal = Math.
   

   在键入句点 (.) 时，编辑器将显示适用于 Math 内部对象的 IntelliSense 选项。

9. 滚动到 PI 属性并按 Enter 以将 PI 属性添加到脚本中。

10. 完成此脚本，使该函数显示如下：

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

11. 将以下不完整的函数添加到 script 元素的末尾：

    function displayVolume()
    {
    
    }
    

12. 在 displayVolume 函数中，键入以下脚本：

      radiusVal = $get("TextBox1").value;
      var areaVal = calcArea(
    

    当键入左括号时，编辑器会显示有关先前创建的 calcArea 函数的参数值的 IntelliSense 信息。

13. 完成脚本行，使该脚本显示如下：

      var areaVal = calcArea(radiusVal);
    

14. 通过键入以下脚本，继续向 displayVolume 函数添加内容：

      var volumeVal = calcVolume(
    

    当键入左括号时，编辑器会使用 IntelliSense 显示基于先前创建的 calcVolume 函数的 XML 代码注释。

15. 完成 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 方法的快捷方式。

16. 在 script 元素末尾键入以下脚本行：

    $addHandler(
    

    在键入左括号时，编辑器将显示适用于 ASP.NET AJAX $addHandler 方法的 IntelliSense。

17. 完成脚本行，使该脚本显示如下：

    $addHandler($get("Button1"), "click", displayVolume);
    

    确保此行在 </script> 标记内部，但不在 displayVolume 函数内部。

    提示

    $addHandler 方法是一个 ASP.NET AJAX 函数，此函数提供 Sys.UI.DomEvent 类的 addHandler 方法的快捷方式。

18. 保存页面，然后按 Ctrl+F5 运行该页面。

19. 为半径输入一个值，然后单击此按钮。

    在 JScript 中创建的计算的结果显示在第二个文本框中。

后续步骤

本演练演示了如何使用 JScript IntelliSense。 您可能希望更多地了解如何在 Visual Studio 中使用客户端脚本。 有关详细信息，请参见ASP.NET AJAX Roadmap。 有关 JScript IntelliSense 的更多信息，请参见 JScript IntelliSense 概述。

请参见

任务

动态分配脚本引用

参考

列出成员

概念

JScript IntelliSense 概述

其他资源

使用 IntelliSense

About the DHTML Object Model

JScript 对象

SRC Attribute | src Property