corner imagecorner image
FeaturesPluginsDocs & SupportCommunityPartners

Изменение JavaScript

Среда IDE NetBeans, начиная с версии 6.1, содержит расширенные возможности по внесению изменений в JavaScript, смоделированные с поддержкой языков Java, Ruby и других. В этом руководстве представлен обзор этих возможностей.

Программное обеспечение, требуемое для работы с данным руководством

Для работы с этим руководством требуется программное обеспечение и ресурсы, перечисленные ниже.

Программное обеспечение или ресурс Требуемая версия
Среда IDE NetBeans версия 6.1 версия 6.0
Комплект для разработчика на языке Java (JDK) версия 6 или
версия 5

Основные возможности

В этом разделе будут рассмотрены основные возможности внесения изменений в JavaScript в среде IDE.

Создание новых файлов

С помощью мастера создания файла в любом проекте можно создать новый файл JavaScript. Для перехода к мастеру выберите "New->Other". В мастере откройте категорию "Other" и выберите файл JavaScript. Новый файл JavaScript создается по шаблону.

При необходимости файл JavaScript можно вывести на экран в редакторе проекта. Для этого создайте файл JavaScript в соответствующей подпапке проекта, например "src".

По умолчанию шаблон JavaScript содержит только информацию о лицензии. Для добавления в шаблон содержимого выберите "Tools -> Templates" и откройте шаблон JavaScript в среде IDE.

Синтаксическая подсветка

В среде IDE для различения методов и переменных применяется автоматическая семантическая подсветка.

Свертывание кода

Код методов может быть свернут или развернут. В редакторе щелкните расположенный рядом с методом значок Свернуть, и код будет свернут. Щелкните расположенный рядом со свернутым методом значок Развернуть , и код будет развернут. Свернутый код обозначается кнопкой многоточием в скобках. Многоточие в скобкахУдерживайте курсор на многоточии в скобках, и на экран будет выведен полный код метода.


При удерживании курсора на многоточии отображается полный код метод

Для свертывания или развертывания всех методов выберите "View -> Code Folds".

Переходы

Вкладка "Navigator" в среде IDE содержит структуру файлов JavaScript. На этой вкладке определения классов распознаются по стилю прототипа и отображаются как классы с методами.


Вкладка "Navigator" со структурой файлов JavaScript

Фоновый синтаксический анализатор

Синтаксический анализатор выполняется в фоновом режиме и выводит подробные сообщения об ошибках.


Фоновый синтаксический анализатор, указывающий на ошибку

Соответствие скобок

Скобки закрываются автоматически. При вводе ',", [, (или { автоматически вставляется соответствующий закрывающий символ. Вводимый пользователем закрывающий символ заменяет вставленный символ. При удалении открывающего символа автоматически удаляется соответствующий закрывающий символ.

Форматирование

При переходе на новую строку в зависимости от того, где будет находиться следующая строка, будет вставлен отступ от курсора. После ввода } строка будет смещена влево. В результате изменения формата выбора или всего буфера весь файл будет смещен вправо.

Поддержка формата JSON

Файлы JSON обрабатываются как JavaScript. Фоновый синтаксический анализатор для JSON выполняется в специальном режиме, допускающем для объекта только литеральные выражения, без функций и т.д.

Семантическая подсветка

Объявления метода выделяются полужирным шрифтом (включая объявления метода по стилю прототипа в литералах объектов), глобальные переменные – зеленым, неиспользуемые переменные – серым с подчеркиванием.


Фрагмент кода с подсветкой

Выделение случаев использования

Курсор, помещенный на символ, выделяет другие случаи использования этой переменной или ее вызовы. Более того, установка курсора на ключевом слове функции приводит к выделению всех возвращаемых этим методом данных (return, throw). Такого результата можно добиться также помещением курсора на оператор "return".


Выделенные операторы return

Быстрое переименование

Нажатием клавиш Ctrl-R/Command-R с курсором, установленным на локальной переменной, выбранный символ можно переименовать сразу во всем файле.


Одновременное переименование переменной

Реорганизация

Существует возможность поиска всех случаев использования переменной или операции в программе. В обнаруженных случаях можно переименовать все совпадающие переменные или операции и реорганизовать их в программе. Перед реорганизацией в режиме предварительного просмотра на разделенном экране графического интерфейса отображаются результаты изменений.

Поиск и переименование всех вхождений переменной или операции:

  1. Выберите в редакторе необходимую переменную или операцию.
  2. Выберите "Edit->Find Usages" (Alt-F7). Поиск можно выполнять как в комментариях, так и в активном коде. Откроется окно "Usages" с деревом всех случаев использования переменной или операции.


    Поиск всех вхождений выбранной переменной

  3. Снова выберите переменную в редакторе, а затем выберите "Refactor -> Rename" (Ctrl-R/Command-R). Откроется диалоговое окно, в котором необходимо ввести новое имя.
  4. Нажмите кнопку "Preview". Откроется окно "Refactoring" с деревом замен слева и разделенным экраном с первоначальным и реорганизованным файлом справа.


    Предварительный просмотр при реорганизации всех вхождений

  5. Возможно, в некоторых случаях переименовывать переменную или операцию не потребуется. Отменить переименование для отдельного вхождения можно в дереве слева.


    Отмена переименования отдельного вхождения

  6. После просмотра нажмите кнопку "Do Refactoring", после чего все файлы будут реорганизованы.

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

В среде IDE неоднократно выполняются семантические проверки кода JavaScript и предлагаются варианты быстрого исправления. Для отображения режима быстрого исправления выберите "Source -> Fix Code" (Alt-Enter). Семантические проверки обнаруживают следующие ошибки:
  • переназначение параметра;
  • анонимная функция не всегда возвращает значение;
  • переменная скрывает аргумент;
  • код не имеет побочных эффектов (отсутствие вызовов, назначений).


    Код не имеет вызовов или назначений

  • Назначение в условном выражении (если x = y). Эта семантическая ошибка имеет несколько вариантов быстрого исправления, связанных, например, с преобразованием в выражение "==" и добавлением двойных круглых скобок для отключения предупреждения.


    Меню вариантов быстрого исправления для назначения в условном выражении

  • Противоречивые данные, возвращаемые функцией (некоторые выражения return возвращают значения, а некоторые нет)


    Противоречивые возвращаемые данные

Список задач

В список задач интегрированы фоновый синтаксический анализатор и предупреждения с вариантами быстрого исправления. Для просмотра ошибок в любом из связанных с JavaScript файлов откройте список задач ("Window -> Tasklist"). Дважды щелкните любую задачу в этом списке, после чего в редактор будет выполнен переход на соответствующую строку.


Список задач с вариантами быстрого исправления

Автозавершение кода и анализ типов

Возможности автозавершения кода JavaScript позволяют выбрать встроенные базовые классы JavaScript среды IDE для вставки в код. Например, можно ввести:
    x = "foo";      y = x;      y.  

После этого на экране появятся методы, доступные для строк JavaScript. Автозавершение кода поддерживает все типы литералов в JavaScript. Более того, механизм анализа типа и автозавершения кода определяет классы по стилю прототипов (только для стандартных функций) и выбирает новый оператор для их создания.

Среда IDE NetBeans обращается к параметрам типа для получения параметров функции и типов возврата (@type, @param). Эти типы отображаются как варианты автозавершения кода: в списке, в документации и подсказках по вводу параметров (Ctrl-P). В диалоговом окне автозавершения кода после имени функции через двоеточие выводятся также типы возвращаемых значений.


Автозавершение кода

Метод, отмеченный как @deprecated, перечеркивается в окне "Navigator" и в вызовах этого метода функцией автозавершения кода. Сопутствующее устаревшее описание представлено в отдельном разделе в документации автозавершения кода и выделено контрастным фоном.

В среде IDE NetBeans можно также определить тип возвращаемого для нескольких функций. Эта функция важна для поддержки JSQuery. Например, методы, возвращающие значения "true" или "false", имеют тип возврата "Boolean"; методы, возвращающие числа, имеют тип "Number", и т.д. В среде IDE типы не только отображаются на экране; объявленные типы также явно отслеживаются в комментариях. Отсюда следует важный вывод: в среде IDE типы отслеживаются посредством вызовов. Если имеется код наподобие следующего:

"foo".big().charCodeAt(50).toExponential(fractionDigits);

Сначала foo считается в NetBeans строкой, поэтому из строкового класса берется метод big(). Строковая функция charCodeAt(50) имеет тип Number, поэтому в окне автозавершения кода будут представлены методы, доступные только для типа Number.

Примечание: Просмотр типов возвращаемых значений предполагает долгий поиск по значению, поэтому в течение анализа типа в среде IDE учитывается время, и через несколько секунд вычисление типа прерывается. Это может оказаться существенным для крупных функций, маломощных систем или производительных компьютеров с большой рабочей нагрузкой.

Переход к объявлению

Нажмите клавишу Ctrl и удерживайте курсор на строке кода. Щелкните левой кнопкой мыши имя переменной. Если тип переменной (и, следовательно, целевой функции) невозможно определить однозначно, в среде IDE появляется меню со всеми объявлениями переменной в текущем проекте:


Меню для перехода к объявлению переменной

Документация

В данных автозавершения кода также показана документация по интерфейсам API как для базовых интерфейсов API JavaScript, так и для интерфейсов API DOM. Можно также просматривать документацию для собственных функций. Установка курсора на вызовах и одновременным нажатием клавиши Ctrl также приводит к выводу документации (в качестве подсказки).


Подсказка с документацией

Автозавершение встроенного кода

Автозавершение кода по идентификаторам элементов в HTML работает для функции Prototype.js $("..."). Для вызова автозавершения кода по идентификаторам элементов нажмите Ctrl-Space с курсором внутри кавычек. Например, в случае добавление переменной = $("f|") и нажатия Ctrl-Space с курсором (|) сразу после f функцией автозавершения кода выводятся все идентификаторы элементов HTML в документе, начинающиеся с f.


Автозавершение по идентификаторам элементов

Совместимость с обозревателями

Можно выбрать обозреватели, которые будут поддерживаться кодом JavaScript. В среде IDE варианты автозавершения кода, которые не поддерживаются выбранными обозревателями, перечеркиваются.

Для выбора поддерживаемых обозревателей:

  1. Выберите "Tools -> Options/Preferences".
  2. Щелкните значок "Miscellaneous". Откроется страница вкладок.
  3. Откройте вкладку "JavaScript".
  4. Выберите и отмените выбор обозревателей и версий.

Следует также отметить, что в документации показаны значки для каждого обозревателя, который поддерживает документированный элемент интерфейса API.


Выбор поддерживаемого обозревателя

В среде IDE в следующем диалоговом окне автозавершения кода перечеркнуты несколько вариантов выбора, так как они не поддерживаются выбранным обозревателем (только Opera).


Перечеркнутые варианты выбора в окне автозавершения кода

Встраивание

Возможности внесения изменений в JavaScript работают для JavaScript, встроенного в файлы RHTML, HTML и JSP.

Открытие типа

Нажмите Ctrl-O/Command-O и перейдите к любой из функций в файлах.


Диалоговое окно "Go to Type"

Поддержка JSDoc

Метод, аннотированный как @private, обозначается в окне "Navigator" значком блокировки. Функция, аннотированная как @constructor, обозначается как конструктор (и добавляется в автозавершение кода после ключевого слова "new"); для четкого присвоения функций классам можно использовать следующие: @class и @namespace (зачастую анализатор типов присваивает эти функции автоматически). Отмеченные аннотацией @ignore функции не обнаруживаются в автозавершении кода, но добавляются в индекс и могут использоваться при переходе к объявлению.


Базовая фильтрация вставки файлов

Автозавершение кода в HTML содержит код только из вызванных файлов JavaScript. Рассмотрим проект, в котором файл foo.js определяет функцию foo(), а файл bar.js определяет функцию bar(). Если файл hello.html содержит только <script src="bar.js"></script>, в автозавершении кода для hello.html отображается только функция bar().



Дополнительная информация

Дополнительные сведения об использовании среды IDE NetBeans для внесения изменений в код на языках, отличных от Java, приведены в следующих материалах:

Оставить комментарии и предложения, обратиться за поддержкой и получить информацию о последних достижениях в области функциональных возможностей разработки для Java EE с помощью среды IDE NetBeans можно в списке рассылки .

Companion
Projects:
MySQL Database Server   GlassFish Community: an Open Source Application Server   Open Solaris  Open JDK: an Open SourceJDK   Mobile & Embedded Community     Sponsored by 
Sponsored by Sun Microsystems