| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <html> |
| <!-- Copyright (c) 2010, Oracle and/or its affiliates. All rights reserved. --> |
| <!-- Use is subject to license terms.--> |
| <head> |
| <title>Редактирование JavaScript - учебный курс по IDE NetBeans</title> |
| <meta name="description" |
| content="A document describing improved JavaScript editing features in NetBeans IDE."> |
| <link rel="stylesheet" href="../../../netbeans.css"> |
| |
| <meta HTTP-EQUIV="Content-Type" Content="text/html; charset=UTF-8"></head> |
| |
| <body> |
| <h1>Редактирование JavaScript</h1> |
| |
| <p>IDE NetBeans обеспечивает усовершенствованные функции редактирования JavaScript, смоделированные для поддержки, уже обеспеченной для Java, Ruby и других языков. Данное руководство содержит обзор этих функций.</p> |
| |
| <div class="indent"> |
| <h3>Содержание</h3> |
| |
| <p><img alt="Содержимое на этой странице применимо к IDE NetBeans 6.9 или более поздней версии" class="stamp" src="../../../images_www/articles/71/netbeans-stamp-71-72-73.png" title="Содержимое на этой странице применимо к IDE NetBeans 6.9 или более поздней версии"></p> |
| |
| <ul class="toc"> |
| <li><a href="#basic">Основные функции</a></li> |
| <li><a href="#semantic_highlighting">Семантическое выделение</a></li> |
| <li><a href="#mark_occurrences">Пометка вхождений</a> </li> |
| <li><a href="#instant_rename">Быстрое переименование</a></li> |
| <li><a href="#refactoring">Реорганизация</a></li> |
| <li><a href="#quickfixes">Быстрые исправления и семантические проверки</a></li> |
| <li><a href="#tasklist">Список задач</a></li> |
| <li><a href="#code_completion">Автозавершение и анализ типов </a></li> |
| <li><a href="#goto">Переход к объявлению</a></li> |
| <li><a href="#documentation">Документация</a></li> |
| <li><a href="#embedded_completion">Автозавершение встроенного кода</a></li> |
| <li><a href="#embedding">Внедрение</a></li> |
| <li><a href="#open_type">Открытие типа</a></li> |
| <li><a href="#jsdoc_support">Поддержка JSDoc </a></li> |
| <li><a href="#basic_file_filtering">Базовая фильтрация включения файлов </a></li> |
| <li><a href="#seealso">Дополнительные сведения</a></li> |
| </ul> |
| </div> |
| <h3 class="tutorial">Программное обеспечение, требуемое для работы с данным учебным курсом.</h3> |
| |
| <p><b>Для работы с этим учебным курсом требуются программное обеспечение и ресурсы, перечисленные ниже.</b></p> |
| |
| <table> |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">Программное обеспечение или материал</th> |
| <th class="tblheader" scope="col">Требуемая версия</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">IDE NetBeans</a></td> |
| <td class="tbltd1">6.9 или 7.3</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://java.sun.com/javase/downloads/index.jsp">Комплект для разработчика на языке Java (JDK)</a></td> |
| <td class="tbltd1">6</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <h2><a name="basic"></a>Основные функции</h2> |
| |
| <p>В этом разделе мы представим основные функции редактирования JavaScript среды IDE.</p> |
| |
| <h3>Создание новых файлов</h3> |
| |
| <p>Новый файл JavaScript можно создать в любом проекте, посредством мастера создания файлов. Щелкните "Создать" -> "Другое" для открытия мастера. В мастере откройте категорию "Другое" и выберите файл JavaScript. Из шаблона будет создан новый файл JavaScript. </p> |
| |
| <p>Если файл JavaScript должен быть видимым в редакторе проектов, создайте файл JavaScript в соответствующей подпапке проекта, такой как src.</p> |
| |
| <p>Шаблон JavaScript по умолчанию содержит только сведения о лицензировании. Чтобы добавить к шаблону содержимое, перейдите к "Средства" -> "Шаблоны" и откройте шаблон JavaScript в среде IDE.</p> |
| |
| <h3>Выделение синтаксиса</h3> |
| |
| <p>Среда IDE предоставляет настоящее <a href="#semantic_highlighting">семантическое выделение</a>, чтобы можно было различать методы и переменные.</p> |
| |
| <h3>Свертывание кода</h3> |
| |
| <p>Метод кода может быть свернут или развернут. В редакторе щелкните значок <img alt="свернуть" src="../../../images_www/articles/72/ide/javascript/collapse_node.png"> рядом с мотодом и он будет свернут. Щелкните значок <img alt="развернуть" src="../../../images_www/articles/72/ide/javascript/expand_node.png"> рядом со свернутым методом и он будет развернут. Свернутый код помечается многоточием в рамке. <img alt="кнопка в виде эллипса" src="../../../images_www/articles/72/ide/javascript/ellipsis_box.png"> Удерживайте курсор над эллиптической формы кнопкой и в IDE отобразится свернутый метод.</p> |
| |
| <p><br><img alt="отображается свернутый метод с помощью удержания курсора над кнопкой в виде эллипса" border="1" src="../../../images_www/articles/72/ide/javascript/show_collapsed_method.png" title="Отображается свернутый метод с помощью удержания курсора над кнопкой в виде эллипса"> |
| |
| <p>Можно развернуть или свернуть все методы в меню "Представление" -> "Свертки кода".</p> |
| |
| <h3>Переходы</h3> |
| |
| <p>На вкладке переходов среды IDE отображается структура файла JavaScript. Вкладка переходов распознает определения классов в стиле прототипов и показывает их как классы с методами.</p> |
| |
| <p><br><img alt="на вкладке 'Навигатор' отображается структура файла JavaScript. " border="1" src="../../../images_www/articles/72/ide/javascript/js_navigator.png" title="На вкладке 'Навигатор' отображается структура файла JavaScript. "> |
| |
| <h3>Фоновое средство синтаксического анализа</h3> |
| |
| <p>Средство синтаксического анализа работает в фоновом режиме и предоставляет подробные сообщения об ошибках.</p> |
| |
| <p><br><img alt="фоновое средство синтаксического анализа, в котором отображается ошибка" border="1" src="../../../images_www/articles/72/ide/javascript/background_parser.png" title="Фоновое средство синтаксического анализа, в котором отображается ошибка"> |
| |
| <h3>Парные скобки</h3> |
| |
| <p>Скобки закрываются автоматически. При вводе ', ", [, ( или { вставляется соответствующий символ для закрытия скобок. При вводе закрывающего символа вручную вставленный будет переписан. При удалении открывающего символа возвратом со стиранием удаляется и парный к нему символ.</p> |
| |
| <h3>Форматирование</h3> |
| |
| <p>При нажатии на клавишу перехода на новую строку курсор переводится туда, где должна быть следующая строка. При нажатии на клавишу <code>}</code> отступ в строке будет немедленно уменьшен. При переформатировании выбранной области или всего буфера отступы для всего файла будут восстановлены.</p> |
| |
| <h3>Поддержка JSON</h3> |
| |
| <p>Работа с файлами JSON осуществляется как с JavaScript. Фоновое средство синтаксического анализа работает в специальном режиме JSON, где разрешается только выражение объектного литерала без функций и т.д.</p> |
| |
| <h2><a name="semantic_highlighting"></a>Семантическое выделение</h2> |
| |
| <p>Объявления методов выделяются жирным шрифтом (включая объявления методов в стиле прототипов в объектных литералах), глобальные переменные выделяются зеленым, а неиспользованные переменные подчеркиваются серым.</p> |
| |
| <p><br> <img alt="фрагмент кода, в котором показано выделение" border="1" src="../../../images_www/articles/72/ide/javascript/highlighting.png" title="фрагмент кода, в котором показано выделение"></p> |
| |
| <h2><a name="mark_occurrences"></a>Пометка вхождений</h2> |
| При наведении курсора на символ будут выделены другие вхождения этой переменной или вызова. Кроме того, при наведении курсора на ключевое слово функции будет выделено всё возвращаемое этим методом (возвращаемые значения, создаваемые исключения). Это также произойдет, если навести курсор на возвращаемое значение. <p><br> <img alt="выделенные возвращаемые элементы" border="1" src="../../../images_www/articles/72/ide/javascript/mark_occurences.png" title="Выделенные возвращаемые элементы"><br> <br> |
| <h2><a name="instant_rename"></a>Быстрое переименование</h2> |
| <p>Нажмите Ctrl-R/Command-R на локальной переменной, и символ можно будет одновременно переименовать по всему файлу. </p> |
| <p><br><img alt="синхронное переименование переменных" border="1" src="../../../images_www/articles/72/ide/javascript/instant_rename.png" title="Переименование всех экземпляров переменной в 'number' во всем файле"> <br> |
| </p> |
| <h2><a name="refactoring"></a>Реорганизация</h2> |
| <p>Можно найти все случаи использования переменной или операции внутри продукта. После их обнаружения можно выполнить переименование всех вхождений переменной или операции или реорганизацию во всём продукте. Перед выполнением реорганизации предварительный просмотр изменений можно выполнить на разделенном экране.</p> |
| <p><strong>Для поиска и переименования всех экземпляров переменной или операции выполните следующие действия.</strong></p> |
| <ol> |
| <li>Выберите вхождение переменной или операции в редакторе.</li> |
| <li>Выберите "Изменить" -> "Найти вхождения" (Alt-F7). Поиск можно выполнять как по активному коду, так и по комментариям. Откроется представление вхождений, показывающее дерево всех случаев использования переменной или операции. |
| <p><br><img alt="поиск всех использований выбранной переменной" border="1" src="../../../images_www/articles/72/ide/javascript/find_usages.png" title="Поиск всех использований переменной Abstract"></p> |
| <li>Выберите переменную в редакторе снова, затем выберите "Рефакторинг" -> "Переименовать" (Ctrl-R/Command-R). Откроется диалоговое окно, в которое можно будет ввести новое имя.</li> |
| <li>Нажмите кнопку "Preview". Откроется представление реорганизации с деревом замен слева и разделенным экраном, на котором показан исходный файл и файл после реорганизации, справа. <p><br> <img alt="предварительный просмотр реорганизации для всех вариантов использования" border="1" src="../../../images_www/articles/72/ide/javascript/refactoring_preview.png" title="Предварительный просмотр реорганизации для всех вариантов использования"></p> |
| </li> |
| <li>Можно отменять переименование для отдельных вхождений переменной или операции. Отменяйте выбор отдельных вхождений в дереве слева. |
| <p><br><img alt="снято выделение переименования по отдельности" border="1" src="../../../images_www/articles/72/ide/javascript/unselected_individual_renaming.png" title="Снято выделение переименования по отдельности"></p> |
| <li>После предварительного просмотра нажмите кнопку "Выполнить реорганизацию", и среда IDE выполнит реорганизацию всех файлов. |
| </ol> |
| <h2><a name="quickfixes"></a>Быстрые исправления и семантические проверки</h2> |
| Среда IDE выполняет множество семантических проверок кода JavaScript и предлагает быстрые исправления. Для отображения быстрых исправлений выберите Source ("Исходный код") -> Fix Code ("Исправить код") (Alt-ВВОД). В число семантические проверок входят следующие. |
| <ul><li>Переприсваивание параметра; </li> |
| <li>Анонимная функция не всегда возвращает значение; </li> |
| <li>Переменная скрывает аргумент; </li> |
| <li> Код без побочных эффектов (нет вызовов, нет присваиваний); |
| <p><br><img alt="код без вызовов или назначений" border="1" src="../../../images_www/articles/72/ide/javascript/nosideeffect.png" title="Код без вызовов или назначений"> </li> |
| <li>Присваивание в условном операторе (if x = y); С этой семантической ошибкой связано несколько быстрых исправлений, таких как преобразование в выражение == и добавление двойных скобок для отключения предупреждения. <br> |
| <p><br> <img alt="меню быстрых исправлений для назначения в условном" border="1" src="../../../images_www/articles/72/ide/javascript/accidental_assignment.png" title="Меню быстрых исправлений для назначения в условном"> </li> |
| <li> Противоречивый возврат от функции (некоторые возвращаемые выражения возвращают значение, а некоторые нет). <p><br> <img alt="несогласованные элементы" border="1" src="../../../images_www/articles/72/ide/javascript/inconsistent_return.png" title="Несогласованные элементы"> |
| </li> |
| </ul> |
| <h2><a name="tasklist"></a>Список задач</h2> |
| Фоновое средство синтаксического анализа и быстрые исправления предупреждений интегрированы со списком задач. Откройте список задач (окно -> Tasklist ("Список задач")) для просмотра ошибок в файлах, связанных с JavaScript. Дважды щелкните задачу в списке, и редактор перейдет к соответствующей строке. |
| <p><br> <img alt="список задач, в котором отображаются быстрые исправления" src="../../../images_www/articles/72/ide/javascript/tasklist.png" title="Список задач, в котором отображаются быстрые исправления"></p> |
| <h2><a name="code_completion"></a>Автозавершение и анализ типов</h2> |
| Автозавершение кода JavaScript предоставляет возможность выбрать между встроенными в среду IDE основными классами JavaScript, которые можно вставить в код. Например, можно написать: |
| <pre> x = "foo"; y = x; y. </pre> |
| <p>и автозавершение кода покажет методы, доступные для строк JavaScript. Автозавершение кода работает со всеми литеральными типами в JavaScript. Механизму анализа типов и автозавершения кода также известны классы в стиле прототипа (только для регулярных функций) и операция new для их конструирования.</p> |
| <p> IDE NetBeans содержит информацию о параметров типов для параметров функций и возвращаемых типов (@type, @param). Эти типы показываются в автозавершении кода: в списке, в документации и в подсказках параметров (Ctrl-P). Возвращаемые типы также показываются в диалоговом окне автозавершения кода после имени функции, отделенные двоеточием. </p> |
| <p><br> <img alt="автозавершение кода" border="1" src="../../../images_www/articles/72/ide/javascript/code_completion.png" title="Автозавершение кода"> |
| <p> Если метод помечен как <tt>@deprecated</tt>, он перечеркивается в навигаторе и в вызовах к нему автозавершения кода. Сопровождающее описание нерекомендуемого метода показывается в отдельном разделе документации автозавершения, с выделением фона. |
| |
| <p> IDE NetBeans также может определить возвращаемые типы для многих функций. Это важно для поддержки JSQuery. Например, методы, возвращающие true или false, имеют тип возврата Boolean ("булево"), методы, возвращающие алгебраические числа, имеют тип возврата Number ("Число") и т. д. Среда IDE как логически выводит типы, так и прямо отслеживает заявленные типы через комментарии. Наиболее важное следствие из этого состоит в том, что среда IDE отслеживает типы, проходящие через вызовы.Если у нас есть вот такой код:</p> |
| |
| <pre>"foo".big().charCodeAt(50).toExponential(fractionDigits);</pre> |
| |
| <p>NetBeans сперва видит, что <tt>foo</tt> – это String, так что она ищет в классе String метод <tt>big()</tt>. Функция <tt>charCodeAt(50)</tt> в этой String принадлежит к типу Number, так что если здесь применить автозавершение кода к "to", можно будет увидеть только методы, доступные в Number. |
| <p><strong>Примечание </strong> Поиск возвращаемых типов включает в себя переход к индексу, который может занять определенное время, поэтому во время анализа типа IDE отслеживание времени по часам и после одной или двух прошедших секунд вычисление типов прерывается. Это может быть актуально для больших функций, медленных компьютеров или быстрых компьютеров с большой рабочей нагрузкой. |
| <h2><a name="goto"></a>Переход к объявлению</h2> |
| Нажмите Ctrl и наведите курсор на строку кода. Щелкните левой кнопкой мыши имя переменной. Если среда IDE не может точно определить тип переменной (и, следовательно, целевую функцию), она предлагает всплывающее меню со всеми объявлениями переменной в проекте: |
| <p><br> <img alt="всплывающее окно для перехода к объявлению переменных" border="1" src="../../../images_www/articles/72/ide/javascript/goto.png" title="Всплывающее окно для перехода к объявлению переменных"><br> <br> |
| <h2><a name="documentation"></a>Документирование</h2> |
| При автозавершении кода отображается документация по интерфейсам API как для основных интерфейсов API javascript, так и для интерфейсов API DOM. Можно также просмотреть документацию для собственноручно созданных функций. При щелчке вызова при удерживаемой клавише Ctrl также будет показана документация (в форме подсказки). <p><br> <img alt="Подсказка по документации" border="1" src="../../../images_www/articles/72/ide/javascript/documentation.png" title="Подсказка по документации"> <br> |
| <h2><a name="embedded_completion"></a>Автозавершение встроенного кода</h2> |
| Автозавершение кода на идентификаторах элементов в HTML работает для функции <tt>Prototype.js $("...")</tt>. Чтобы увидеть автозавершение кода на идентификаторах элементов, нажмите Ctrl-Space внутри кавычек. Например, если добавить <em>variable </em> = $("f<strong>|</strong>") и нажать Ctrl-Space, когда курсор (<strong>|) </strong>находится сразу после f, автозавершение кода покажет все идентификаторы элементов HTML, начинающиеся с f. |
| <p><br> <img alt="завершение идентификатора элемента" border="1" src="../../../images_www/articles/72/ide/javascript/embedded_completion.png" title="Завершение идентификатора элемента"><br> <br> |
| <h2><a name="embedding"></a>Внедрение</h2> |
| Функции внедрения JavaScript работают для JavaScript, внедренного в файлы RHTML, HTML и JSP. <br> <br> |
| <h2><a name="open_type"></a>Открытие типа</h2> |
| Нажмите Ctrl-O/Command-O и быстро перейдите к одной из своих функций, в каком бы файле она ни находилась. <p><br> <img alt="диалоговое окно 'Перейти к типу'" src="../../../images_www/articles/72/ide/javascript/find_type.png" title="Диалоговое окно 'Перейти к типу'"><br> <br> |
| <h2><a name="jsdoc_support"></a>Поддержка JSDoc</h2> |
| <p>Если добавить к методу аннотацию <tt>@private</tt>, он будет отображен в навигаторе со значком замка. Если добавить к функции аннотацию <tt>@constructor</tt>, она будет показана как конструктор (и включена в автозавершение кода после ключевого слова "new"). <tt>@class</tt> и <tt>@namespace</tt> можно использовать для прямого назначения функций определенным классам (хотя анализатор функций часто назначает эти функции автоматически). Функции, помеченные <tt>@ignore</tt>, не появляются в автозавершении кода, но входят в индекс и могут быть использованы в <a href="#goto">Go To Declaration</a>. </p> |
| <br> |
| <h2><a name="basic_file_filtering"></a>Базовая фильтрация включения файлов</h2> |
| При автозавершении кода в HTML включается только код из файлов JavaScript, на которые установлены ссылки. Давайте рассмотрим проект, в котором файл <tt>foo.js</tt> определяет функцию <tt>foo()</tt>, а файл <tt>bar.js</tt> определяет функцию <tt>bar()</tt>. Если файл <tt>hello.html</tt> включает только функцию <tt><script src="bar.js"></script></tt>, то только функция <tt>bar()</tt> отображается в автозавершении кода для <tt>hello.html</tt>. <br> |
| <p><br> |
| </p> |
| |
| <div class="feedback-box" ><a href="/about/contact_form.html?to=3&subject=Feedback:%20JavaScript%20Editing%20in%20NetBeans%20IDE%206.1">Мы ждем ваших отзывов</a></div> |
| <br style="clear:both;"> |
| <!-- ======================================================================================= --> |
| <h2><a name="seealso"></a>Дополнительные сведения</h2> |
| <p>Дополнительные сведения об использовании IDE NetBeans для редактирования веб-языков, отличных от Java, см. следующие ресурсы: </p> |
| <ul> |
| <li>Разделы JavaScript, Python и Groovy <a href="../../trails/java-ee.html">Учебной карты по JavaEE и Java Web</a> </li> |
| <li><a href="../../trails/php.html">Учебная карта по приложению PHP</a>.</li> |
| </ul> |
| <p>Для отправки комментариев и предложений, получения поддержки и новостей о последних разработках, связанных с Java EE IDE NetBeans <a href="../../../community/lists/top.html">присоединяйтесь к списку рассылки nbj2ee@netbeans.org</a>.</p> |
| </body> |
| </html> |
