| <!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 и других языков. Данное руководство содержит обзор этих функций.</p> |
| |
| <div class="indent"> |
| <h3>Содержание</h3> |
| <img alt="Содержимое на этой странице применимо к IDE NetBeans 7.3" class="stamp" src="../../../images_www/articles/73/netbeans-stamp.png" title="Содержимое этой страницы применимо к IDE NetBeans 7.3"> |
| |
| <ul class="toc"> |
| <li><a href="#basic">Основные функции</a></li> |
| <li><a href="#mark_occurrences">Пометка вхождений и мгновенное переименование</a> </li> |
| <li><a href="#code_completion">Автозавершение и анализ типов </a></li> |
| <li><a href="#documentation">Документация</a></li> |
| <li><a href="#open_type">Открытие типа</a></li> |
| <li><a href="#jsdoc_support">Поддержка JSDoc </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="http://www.netbeans.org/downloads/index.html">IDE NetBeans</a></td> |
| <td class="tbltd1">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 или 7</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <h2><a name="basic"></a>Основные функции</h2> |
| |
| <p>В этом разделе мы представим основные функции редактирования JavaScript среды IDE.</p> |
| <div class="indent"> |
| <h3>Создание новых файлов</h3> |
| <p>Новый файл JavaScript можно создать в любом проекте, посредством мастера создания файлов. Выберите 'Файл' > 'Создать файл' в главном меню и выберите файл JavaScript в категории HTML/JavaScript в мастере. Если категория HTML/JavaScript не доступна в установке, можно выбрать файл JavaScript в категории 'Другие'в мастере создания файлов. Если необходимо, чтобы файл JavaScript отображался в окне 'Проекты', создайте файл JavaScript в соответствующей подпапке проекта, такой как <tt>public_html</tt> или <tt>src</tt>.</p> |
| <p>Шаблон по умолчанию, который используется для файлов JavaScript, содержит только информацию о лицензировании. Чтобы добавить содержимое в шаблон, выберите 'Сервис' > 'Шаблоны' из главного меню, чтобы открыть 'Диспетчер шаблонов'. Выберите шаблон файлов JavaScript в категории HTML/JavaScript и нажмите 'Открыть в редакторе', чтобы изменить шаблон JavaScript.</p> |
| |
| <h3>Синтаксическая и семантическая подсветка</h3> |
| <p>Редактор обеспечивает подсветку кода для методов и переменных, а также глобальных переменных и свойств объектов литералов.</p> |
| <img alt="на вкладке 'Навигатор' отображается структура файла JavaScript. " class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-highlighting.png" title="На вкладке 'Навигатор' отображается структура файла JavaScript. "> |
| |
| <h3>Свертывание кода</h3> |
| <p>Код метода, комментарии и блоки кода в скобках можно свернуть или развернуть. Нажмите значки <img alt="свернуть" src="../../../images_www/articles/73/ide/js-editor/collapse_node.png"> и <img alt="развернуть" src="../../../images_www/articles/73/ide/js-editor/expand_node.png"> рядом с левым полем редактора, чтобы свернуть или развернуть код. Поле с многоточием означает свернутый код, и можно поместить курсор над этим полем для просмотра свернутого кода. Можно быстро свернуть или развернуть все свернутые коды в файле, выбрав 'Вид' > 'Свернутый код' в главном меню.</p> |
| <img alt="свертывание кода" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/js-codefold.png" title="Свертывание кода"> |
| <p>Также можно создавать собственные свертывания с описаниями и указать состояние по умолчанию.</p> |
| <pre class="examplecode">// <editor-fold desc="This is my custom fold"> |
| Your code goes here... |
| // </editor-fold></pre> |
| |
| <h3>Переходы</h3> |
| <p>В окне 'Навигатор' отображается структура файла JavaScript, что позволяет легко переходить к элементам в коде.</p> |
| <img alt="на вкладке 'Навигатор' отображается структура файла JavaScript. " class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-nav.png" title="На вкладке 'Навигатор' отображается структура файла JavaScript. "> |
| |
| <h3><a name="goto"></a>Переход к объявлению</h3> |
| <p>Нажмите клавишу Ctrl и удерживайте курсор на строке кода, а затем щелкните левой кнопкой мыши имя переменной, чтобы перейти к объявлению переменной. </p> |
| |
| <h3>Фоновое средство синтаксического анализа</h3> |
| <p>Средство анализа работает в фоновом режиме и предоставляет подробные предупреждения и подсказки для устранения возможных неполадок. Можно настроить подсказки JavaScript , которые отображаются на вкладке 'Подсказки' в окне 'Параметры'.</p> |
| <img alt="снимок экрана вкладки 'Подсказки JavaScript' в окне 'Параметры'" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-hints.png" title="Вкладка 'Подсказки JavaScript' в окне 'Параметры'"> |
| |
| <h3>Сопоставление скобок</h3> |
| <p>Скобки закрываются автоматически. При вводе ', ", [, ( или { вставляется соответствующий символ для закрытия скобок. При вводе закрывающего символа вручную вставленный будет переписан. При удалении открывающего символа возвратом со стиранием удаляется и парный к нему символ.</p> |
| |
| <h3>Форматирование</h3> |
| <p>Вкладка 'Форматирование' в окне 'Параметры' позволяет задать параметры для файлов JavaScript, в том числе отступы, пробелы и переносы строк.</p> |
| <img alt="снимок экрана вкладки 'Форматирование' в окне 'Параметры'" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-formatter.png" title="Вкладка 'Форматирование' в окне 'Параметры'"> |
| |
| <h3>Поддержка JSON</h3> |
| <p>Работа с файлами JSON осуществляется как с JavaScript. Фоновое средство синтаксического анализа работает в специальном режиме JSON, где разрешается только выражение объектного литерала без функций и т.д.</p> |
| |
| <h3><a name="embedding"></a>Внедрение</h2> |
| <p>Функции редактирования JavaScript также работают для кода JavaScript, встроенного в файлы PHP, JSP и HTML.</p> |
| </div> |
| |
| <h2><a name="mark_occurrences"></a>Пометка вхождений и мгновенное переименование</h2> |
| <p>При наведении курсора на символ будут выделены другие вхождения этой переменной или вызова. Кроме того, при наведении курсора на ключевое слово функции будет выделено всё возвращаемое этим методом (возвращаемые значения, создаваемые исключения). Это также произойдет, если навести курсор на возвращаемое значение. <p> |
| <img alt="выделенные возвращаемые элементы" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-occur.png" title="Выделенные возвращаемые элементы"> |
| <p>Нажмите Ctrl-R/Command-R на локальной переменной, и символ можно будет одновременно переименовать по всему файлу. </p> |
| |
| <h2><a name="code_completion"></a>Автозавершение и анализ типов</h2> |
| <p>Автозавершение кода JavaScript предоставляет возможность выбрать между встроенными в среду IDE основными классами JavaScript, которые можно вставить в код. Например, если вы пишете следующий код:</p> |
| <pre> x = "foo"; y = x; y. </pre> |
| <p>При автозавершении кода будут отображены методы, доступные для строк JavaScript. Автозавершение кода работает со всеми литеральными типами в JavaScript. Механизму анализа типов и автозавершения кода также известны классы в стиле прототипа (только для регулярных функций) и операция new для их конструирования.</p> |
| <p> IDE NetBeans содержит информацию о параметров типов для параметров функций и возвращаемых типов (@type, @param). Эти типы отображаются в завершении кода: в списке, в документации и в подсказках для параметров. Возвращаемые типы также показываются в диалоговом окне автозавершения кода после имени функции, отделенные двоеточием. </p> |
| <img alt="снимок автозавершения кода в редакторе" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-codecompletion.png" title="Автозавершения кода в редакторе"> |
| <p> Если вы отметите метод с помощью <tt>@deprecated</tt>, эта отметка будет вычеркнута в окне 'Навигатор'. Сопровождающее описание нерекомендуемого метода показывается в отдельном разделе документации автозавершения, с выделением фона.</p> |
| |
| <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 отслеживание времени по часам и после одной или двух прошедших секунд вычисление типов прерывается. Это может быть актуально для больших функций, медленных компьютеров или быстрых компьютеров с большой рабочей нагрузкой.</p> |
| |
| <h2><a name="documentation"></a>Документирование</h2> |
| <p>Автозавершение кода показывает документацию API как для основных API JavaScript, так и для API DOM. Можно также просмотреть документацию для собственноручно созданных функций. При щелчке вызова при удерживаемой клавише Ctrl также будет показана документация (в форме подсказки).</p> |
| <img alt="снимок экрана для подсказки с документацией" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-doc.png" title="Документация JQuery в подсказке"> |
| <p>Автозавершение кода для jQuery также доступно в редакторе.</p> |
| <img alt="снимок экрана для подсказки с документацией" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-jquerydoc.png" title="Документация JQuery в подсказке"> |
| |
| <h2><a name="open_type"></a>Открытие типа</h2> |
| <p>Нажмите Ctrl-O/Command-O и быстро перейдите к одной из своих функций, в каком бы файле она ни находилась. <p> |
| <img alt="диалоговое окно 'Перейти к типу'" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-gototype.png" title="Диалоговое окно 'Перейти к типу'"> |
| |
| <h2><a name="jsdoc_support"></a>Поддержка JSDoc</h2> |
| <p>IDE теперь поддерживает JSDoc версии 2, ScriptDoc и ExtDoc. Если аннотировать метод с помощью <tt>@private</tt>, он отображается в Навигаторе со значком замка. Если аннотировать функцию с помощью <tt>@constructor</tt>, она отображается как конструктор (и включается в автозавершение кода после "новых" ключевых слов).</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>Дополнительные сведения о работе с редактором JavaScript в IDE NetBeans см. в следующих ресурсах. </p> |
| <ul> |
| <li>Демонстрационный ролик:<a href="../../docs/web/html5-javascript-screencast.html"> HTML5. Часть 3. Тестирование и отладка JavaScript в приложениях HTML5</a></li> |
| <li><a href="../../docs/webclient/html5-js-support.html">Тестирование и отладка JavaScript в приложениях HTML5</a></li> |
| <li><a href="https://blogs.oracle.com/netbeansphp/entry/javascript_code_folding">Свертывание кода JavaScript:</a> на NetBeans для блога PHP.</li> |
| <li><a href="https://blogs.oracle.com/netbeansphp/entry/jquery_support">Поддержка JQuery</a> на NetBeans для блога PHP.</li> |
| <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> |
