1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
---
title: Черновик
slug: Tools/Черновик
tags:
- Scratchpad
- Блокнот
- Веб-разработка
- Редактор
- 'веб-разработка:инструменты'
- инструменты
translation_of: Archive/Tools/Scratchpad
---
<div>{{ToolsSidebar}}</div>
<p>Простой редактор (Scratchpad, блокнот) JavaScript обеспечивает среду для экспериментов с JavaScript-кодом. Вы можете писать и запускать в нём код, взаимодействующий с содержимым веб-страницы, и проверять результаты его выполнения.</p>
<p>В отличие от <a href="/ru/Tools/Web_Console" title="ru/Использование Веб-консоли">Веб-консоли</a>, которая позволяет интерпретировать только одну строку кода за раз, этот редактор позволяет вам редактировать большие фрагменты кода на JavaScript, затем запускать их разными способами в зависимости от того, как вы хотите использовать вывод результата.</p>
<p>{{EmbedYouTube("Pt7DZACyClM")}}</p>
<h2 id="Использование">Использование</h2>
<h3 id="Открываем_редактор_в_отдельном_окне">Открываем редактор в отдельном окне</h3>
<p>Чтобы открыть окно редактора JavaScript в отдельном окне:</p>
<ul>
<li>нажмите <kbd>Shift</kbd> + <kbd>F4</kbd>, либо перейдите в меню Веб-разработка (которое находится в меню Инструменты на OS X и Linux), где выберите пункт «Простой редактор JavaScript».</li>
<li>кликните "ключ" (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">), который находится на панели инструментов внутри меню (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">), после выберите «Простой редактор JavaScript».</li>
</ul>
<h3 id="Открытие_Редактора_в_окне_Инструменты_разработки">Открытие Редактора в окне Инструменты разработки</h3>
<div class="geckoVersionNote">Новое в Firefox 47.</div>
<p>Начиная с Firefox 47, вы можете открыть редактор внутри окна "<a href="/ru/docs/Tools/Tools_Toolbox">Инструменты разработки</a>". Вначале установите галочку напротив «Простой редактор JavaScript», которая находится в <a href="/ru/docs/Tools/Tools_Toolbox#Settings">настройках</a> окна "Инструменты разработки" в области "Инструменты разработчика Firefox по умолчанию".</p>
<p>Теперь Редактор будет доступен в окне "Инструменты", наряду с Инспектором, Консолью, Отладчиком и другими. Это особенно удобно в <a href="/en-US/docs/Tools/Web_Console/Split_console">режиме раздельной консоли</a>: например, можно использовать редактор как постоянный многострочный редактор, и консоль для взаимодесствия со страницей.</p>
<h3 id="Редактирование">Редактирование</h3>
<p>Окно Редактора выглядит так (на Mac OS X строка меню находится сверху экрана):</p>
<p><img alt="A screenshot of the Scratchpad" src="https://mdn.mozillademos.org/files/14143/own_window1.png" style="height: 249px; width: 831px;"></p>
<p>Меню File предлагает варианты для сохранения и загрузки фрагментов JavaScript-кода, так что вы можете повторно использовать код позже, если захотите.</p>
<h4 id="Автозавершение_кода"><span class="short_text" id="result_box" lang="ru"><span>Автозавершение кода</span></span></h4>
<p><span class="short_text" lang="ru"><span>Редактор интегрирует анализатор кода <a href="http://ternjs.net/">Tern</a>, и использует его для предоставления автодополнений и всплывающих подсказок с информацией о текущем символе. Для просмотра автодополнений нажмите </span></span> <kbd>Ctrl</kbd> + <kbd>Space</kbd>.</p>
<p>Например, напишите <kbd>d</kbd>, после нажмите <kbd>Ctrl</kbd> + <kbd>Space</kbd>. Вы увидите окно с вариантами автодополнений: </p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14147/autocomplete1.png" style="display: block; height: 275px; margin-left: auto; margin-right: auto; width: 838px;"></p>
<p>Иконка рядом с каждым вариантом указывает на тип выбираемого элемента. Здесь же по выбранному элементу отображается полезная информация. Можно выбирать разные варианты предложений клавишами <kbd>↑</kbd> and <kbd>↓</kbd>. Для утверждения и вставки слова в текст нажмите <kbd>Enter</kbd> or <kbd>Tab</kbd>.</p>
<h4 id="Inline_documentation">Inline documentation</h4>
<p>Для просмотра всплывающего окна с документацией нажмите <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd>, когда курсор на идентификаторе (Javascript). Например, если вы напишите <code>document</code>.<code>addEventListener</code>, нажмёте <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd>, то <span id="result_box" lang="ru"><span>увидите</span> <span>всплывающее окно, которое</span> <span>показывает</span> <span>краткую информацию о</span> <span>синтаксисе</span> этой <span>функции</span> <span>и</span> <span>краткое описание:</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14145/inline_doc1.png" style="display: block; height: 310px; margin-left: auto; margin-right: auto; width: 827px;"></p>
<p>Ссылка [документация] откроет в окне документацию MDN по элементу.</p>
<h3 id="Выполнение_кода">Выполнение кода</h3>
<div class="note">
<p>После того, как вы написали свой код, выделите код, который вы хотите запустить. Если вы ничего не выделите, будет запущен весь код в окне. Затем выберите способ, которым хотите запустить, с помощью одной из кнопок наверху, меню Выполнить в строке меню, или контекстного меню. Код выполняется в контексте выбранной в данный момент вкладке. Все переменные, которые вы определили вне функции, будут добавлены в глобальный объект этой вкладки.</p>
</div>
<p>Доступны четыре варианта выполнения.</p>
<h4 id="Запуск">Запуск</h4>
<p>Когда вы выбираете опцию Запустить, то выполняется выделенный код. Это способ, которым вы будете выполнять функцию или другой код, который воздействует на содержание вашей страницы. Без необходимости просмотра результата.</p>
<h4 id="Исследовать">Исследовать</h4>
<p>Опция Исследовать выполняет код так же, как и Запустить; однако затем открывается объект Инспектор, чтобы вы могли узнать возвращенное кодом значение.</p>
<p>Например, если вы введете код:</p>
<pre class="notranslate">window
</pre>
<p>Затем выберите Исследовать, вы получите окно Инспектора, которое может выглядеть примерно так:</p>
<p><img alt="Inspecting an object in the Scratchpad" src="https://mdn.mozillademos.org/files/14151/inspect1.png" style="height: 308px; width: 833px;"></p>
<h4 id="Отобразить">Отобразить</h4>
<p>Опция «Отобразить» выполняет выделенный код, затем вставляет результат непосредственно в окно редактора в качестве комментария, так что его можно будет использовать согласно циклу <a href="http://ru.wikipedia.org/wiki/REPL">REPL</a> для дальнейшего программирования.</p>
<h4 id="Перезагрузить_и_запустить">Перезагрузить и запустить</h4>
<p>Опция «Перезагрузить и запустить» доступна только в меню Выполнить. Она сначала перезагружает страницу, затем выполняет код по событию страницы «load». Это полезно для выполнения кода в первоначальном окружении.</p>
<h2 id="Запуск_Редактора_в_контексте_браузера"><span class="short_text" id="result_box" lang="ru"><span>Запуск</span> Редактора <span>в контексте</span> <span>браузера</span></span></h2>
<p><span id="result_box" lang="ru"><span>Вы можете запустить</span> <span>блокнот</span> <span>в контексте</span> <span>браузера</span> <span>в целом</span><span>, а не для конкретной</span> <span>веб-страницы</span><span>.</span> Например<span>, если</span> <span>вы работаете на</span>д <span>самим</span> <span>Firefox</span> <span>или разработкой</span> <span>дополнений.</span> <span>Для</span> <span>этого </span>поставьте галочку <span>"Включить инструменты отладки browser chrome </span><span>и</span> <span>дополнений</span><span>" в настройках "<a href="/ru/docs/Tools/Tools_Toolbox#Settings">Инструментов разработки</a>"</span></span>. После этого в м<span id="result_box" lang="ru"><span>еню</span> <span>"Окружение" (в Редакторе)</span> появится <span>опция</span> "Браузер"<span>;</span> <span>как только это произойдет</span><span>,</span> <span>вашей сферой</span> <span>станет</span> <span>весь браузер</span><span>, а не только</span> <span>содержимое страницы</span><span>. Ниже рассмотрен пример, где объект window доступен в любом режиме Окружения, а объект gBrowser только в режиме "Браузер" (иначе появится сообщение об ошибке):</span></span></p>
<pre class="brush: js notranslate">window
/*
[object ChromeWindow]
*/
gBrowser
/*
[object XULElement]
*/</pre>
<p><span id="result_box" lang="ru"><span>Контекст выполнения</span> Реактора <span>установлен на "</span><span>Браузер". Если вы открываете файл со скриптом в редакторе, и он первой строкой имеет </span></span><strong>// -sp-context: browser</strong><span lang="ru"><span>, то</span> окружение автоматически переключится в режим "Браузер". Это происходит только при открытии.</span></p>
<p><span lang="ru"><img alt="" src="https://mdn.mozillademos.org/files/14149/autochange-environment1.png" style="height: 206px; width: 829px;"></span></p>
<h2 id="Сочетания_клавиш">Сочетания клавиш</h2>
<p>{{ Page ("ru/docs/tools/Keyboard_shortcuts", "scratchpad") }}</p>
<h3 id="Сочетания_клавиш_редактора_исходного_кода">Сочетания клавиш редактора исходного кода</h3>
<p>{{ Page ("ru/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
|
