Поделиться через

Пошаговое руководство. IntelliSense для JScript

  • Статья

В этом пошаговом руководстве описано как IntelliSense используется для поддержки разработки клиентских скриптов в Visual Studio. IntelliSense упрощает доступ к справочникам по языку. Во время программирования нет необходимости покидать редактор кода для поиска элементов языка, таких как синтаксис или списки параметров. Вместо этого можно остаться в режиме редактирования, найти необходимые сведения и вставить элементы языка непосредственно в код. Visual Studio поддерживает технологию IntelliSense для языка Microsoft JScript и других языков ECMAScript, таких как JavaScript.

Примечание

В частности, этот документ относится к языку Jscript.При этом IntelliSense в Visual Studio и Visual Web Developer работает со всеми языками ECMAScript, включающими JavaScript.

Visual Studio поддерживает IntelliSense для обеспечения следующих функциональных возможностей.

  • Элементы DHTML Document Object Model (DOM).

  • Встроенные объекты.

  • Пользовательские переменные, функции и объекты.

  • Ссылки на внешние файлы.

  • Комментарии к коду XML

  • Объекты ASP.NET AJAX.

Дополнительные сведения о функциональных возможностях IntelliSense в Visual Studio см. в разделе Использование технологии IntelliSense. Дополнительные сведения о технологии IntelliSense для JScript см. в разделе Общие сведения об IntelliSense для JScript.

Обязательные компоненты

Для выполнения инструкций данного пошагового руководства необходимы следующие компоненты:

  • Visual Studio 2010 или Microsoft Visual Web Developer, экспресс-выпуск.

Создание веб-узла и страницы

Для начала потребуется создать веб-узел ASP.NET со вспомогательными объектами, ссылками и скриптом. Если веб-узел уже был создан (например, по шагам, описанным в разделе Пошаговое руководство. Создание нового веб-сайта ASP.NET), то можно использовать его и перейти к следующему разделу данного пошагового руководства. В противном случае, создайте новый веб-узел и страницу, выполнив следующие действия.

Чтобы создать веб-приложение, выполните следующие действия:

  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 в Панели элементов перетащите на страницу элемент управления 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 используется для отображения сведений о многих типах клиентских объектов, таких как элементах Dynamic HTML (DHTML) Document Object Model (DOM), встроенных объектах и пользовательских объектах. IntelliSense можно использовать для отображения сведений о скриптах с XML-комментариями и об объектах Библиотека Microsoft Ajax.

Отображение JScript IntelliSense

  1. Перейдите к странице Default.aspx или откройте ее и переключитесь в режим конструктора.

  2. В конец элемента form добавьте следующий элемент script:

    <script type="text/javascript">

</script>

  3. Внутри элемента script наберите следующий скрипт:

    var displayTitle = document.

    После набора знака точки (.), в редакторе отображаются варианты IntelliSense, соответствующие объекту document.

  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.

    После набора знака точки (.), в редакторе отображаются варианты IntelliSense, соответствующие встроенному объекту Math.

  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(

    После набора открывающей скобки в редакторе выводятся сведения IntelliSense о значении параметра для функции calcArea, которая была создана раньше.

  13. Завершите строку скрипта, чтобы скрипт имел следующий вид:

      var areaVal = calcArea(radiusVal);

  14. Продолжите дополнение функции displayVolume, набрав следующий скрипт:

      var volumeVal = calcVolume(

    После набора открывающей скобки IntelliSense используется в редакторе для отображения комментариев к коду XML, основанным на функции calcVolume, которая была создана раньше.

  15. Завершите функцию displayVolume, так чтобы она имела следующий вид:

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

    Примечание

    Метод $get представляет собой функцию ASP.NET AJAX, обеспечивающую краткое имя для метода getElementById класса Sys.UI.DomElement.

  16. В конце элемента script наберите следующую строку скрипта:

    $addHandler(

    После набора открывающей скобки в редакторе отображается IntelliSense для метода ASP.NET AJAX $addHandler.

  17. Завершите строку скрипта, чтобы скрипт имел следующий вид:

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

    Строка должна быть расположена внутри тега </script>, а не внутри функции displayVolume.

    Примечание

    Метод $addHandler представляет собой функцию ASP.NET AJAX, обеспечивающую краткое имя для метода addHandler класса Sys.UI.DomEvent.

  18. Сохраните страницу и нажмите клавиши CTRL + F5 для запуска.

  19. Введите значение для радиуса и нажмите кнопку.

    Результат вычислений, созданных в JScript, возраста отображается во втором текстовом поле.

Следующие действия

В данном пошаговом руководстве показано, как работать с JScript IntelliSense. Можно также получить дополнительные сведения по работе с клиентским скриптом Visual Studio. Дополнительные сведения см. в разделе ASP.NET AJAX Roadmap. Дополнительные сведения о JScript IntelliSense см. в разделе Общие сведения об IntelliSense для JScript.

См. также

Задачи

Динамическое присваивание ссылок на скрипты

Ссылки

Список членов

Основные понятия

Общие сведения об IntelliSense для JScript

Другие ресурсы

Использование технологии IntelliSense

About the DHTML Object Model

Объекты JScript

SRC Attribute | src Property