Куда писать Javascript-код
На текущий момент Javascript используется не только в браузерах, но здесь я покажу именно пример для браузеров (предполагается, что с HTML вы уже знакомы). Пусть есть HTML-страница:
Javascript-код добавляется с помощью тега script. Внутри тега script содержится сам код. Этот код начинает выполняться сразу же, как только загрузится, не дожидаясь окончания загрузки остальной части документа.
Можно внедрить Javascript-код в саму страницу:
Запуск JavaScript в консоли
Вы можете ввести любое выражение JavaScript, инструкцию или фрагмент кода в консоли, и он запускается сразу и в интерактивном режиме по мере ввода. Это возможно, так как средство Консоли в Средствах разработки является средой REPL . REPL — чтение, оценка, печать и цикл.
Консоль:
- Считывает вводимый код JavaScript.
- Оценивает код.
- Выводит результат выражения.
- Цикл возвращается к первому шагу.
Чтобы ввести операторы и выражения JavaScript в интерактивном режиме в консоли, выполните следующие действия:
- Щелкните правой кнопкой мыши веб-страницу и выберите Пункт Проверить. Откроется devTools. Или нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS), чтобы напрямую открыть консоль DevTools.
- При необходимости щелкните в средствах разработки, чтобы сосредоточиться на нем, а затем нажмите клавишу ESC , чтобы открыть консоль.
- Щелкните консоль и введите 2+2 , не нажимая клавишу ВВОД. Консоль сразу же отображает результат 4 в следующей строке при вводе. Эта Eager evaluation функция помогает создавать допустимые коды JavaScript. Консоль отображает результат во время ввода, независимо от того, правильно ли ваш Код JavaScript, и независимо от того, существует ли допустимый результат.
- При нажатии клавиши ВВОДконсоль запускает команду JavaScript (выражение или инструкцию), отображает результат, а затем перемещает курсор вниз, чтобы вы могли ввести следующую команду JavaScript.

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

- Тип doc .
- Нажмите клавиши со стрелками, чтобы выделить document их в раскрывающемся меню.
- Нажмите клавишу TAB , чтобы выбрать document .
- Тип .bo .
- Нажмите клавишу TAB , чтобы выбрать document.body .
- Введите другой . , чтобы получить большой список возможных свойств и методов, доступных в тексте текущей веб-страницы.
Журнал консоли
Как и во многих других средах командной строки, журнал введенных команд доступен для повторного использования. Нажмите клавишу СТРЕЛКА ВВЕРХ , чтобы отобразить команды, введенные ранее.
Аналогичным образом автозавершение сохраняет журнал команд, введенных ранее. Вы можете ввести первые несколько букв предыдущих команд, а предыдущие варианты отображаются в текстовом поле.
Кроме того, консоль также предлагает довольно много служебных методов , которые делают вашу жизнь проще. Например, всегда содержит результат последнего выражения, $_ запущенного в консоли.

в консоли всегда содержит последний результат.» /> в консоли всегда содержит последний результат.» />
Многостроковые изменения
По умолчанию консоль предоставляет только одну строку для записи выражения JavaScript. Код выполняется при нажатии клавиши ВВОД. Ограничение на одну строку может сорвать вас. Чтобы обойти ограничение на 1 строку, нажмите клавиши SHIFT+ВВОД , а не ВВОД. В следующем примере отображаемое значение является результатом выполнения всех строк (инструкций) по порядку:

Если запустить многострочный оператор в консоли, блок кода будет автоматически распознан и отступ. Например, если запустить оператор block, введя фигурную скобку, следующая строка будет автоматически отступить:

Сетевые запросы с использованием await() верхнего уровня
За исключением собственных скриптов, консоль поддерживает ожидание верхнего уровня для выполнения произвольного асинхронного JavaScript. Например, используйте fetch API без упаковки инструкции await с асинхронной функцией.
Чтобы получить последние 50 проблем, которые были зарегистрированы в средствах разработчика Microsoft Edge для Visual Studio Code репозитория GitHub:
- В средствах разработки откройте консоль.
- Скопируйте и вставьте следующий фрагмент кода, чтобы получить объект, содержащий 10 записей:
await ( await fetch( 'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1' )).json();
10 записей трудно распознать, так как отображается много информации.
Чтобы повторно использовать данные, возвращенные из выражения, используйте copy() служебный метод Консоли.copy(await (await fetch( 'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1' )).json())
Консоль — это отличный способ попрактиковаться в JavaScript и выполнить некоторые быстрые вычисления. Реальная сила заключается в том, что у вас есть доступ к объекту окна . См . раздел Взаимодействие с DOM с помощью консоли.
Куда писать javascript код
Перед написанием JS-кода встает резонный вопрос — где его хранить?
Существуют следующие варианты:
- Если вы разрабатываете JS-код для компонента и данный код больше нигде не применяется, разумнее расположить файл script.js в шаблоне самого компонента.
- Если JS-код общий для всей публичной части, разумнее его разместить в шаблоне сайта. Как правило, такие JS-файлы хранятся в подпапке шаблона js/ и подключаются в самом шаблоне методом: Bitrix\Main\Page\Asset::getInstance()->addJs(); Но этот путь не подходит, если шаблонов сайта несколько, или вы разрабатываете код для административной части, или публичный шаблон запрещено менять по причине его обновлений компанией Битрикс (например, коробочный шаблон Битрикс24).
- В случае, описанном выше, применяется метод хранения файлов по пути /local/file.js . Этот же метод размещения стоит избрать в случае создания вами своего модуля.
Регистрация и подключение библиотек
Остановимся поподробнее на последнем варианте. Естественно, вы можете также разместить код в шаблоне сайта через Bitrix\Main\Page\Asset::getInstance()->addJs(); . Но более правильным решением будет третий подход.
Каждый файл в вашей папке по сути является отдельной мини-библиотекой, которую надо зарегистрировать. Регистрация Регистрация библиотек в include.php модуля или в init.php. осуществляется с помощью следующего кода:
$arJsConfig = array( ‘custom_main’ => array( ‘js’ => ‘/bitrix/js/custom/main.js’, ‘css’ => ‘/bitrix/js/custom/main.css’, ‘rel’ => array(), ) ); foreach ($arJsConfig as $ext => $arExt)
Как видите, код универсален, и можно зарегистрировать несколько файлов. В ключе CSS вы дополнительно можете указать CSS-файл (в случае если CSS-код идет в пару к JS), а ключом rel перечислить коды других BX-библиотек, которые будут автоматически подключены при подключении этой библиотеки.
Когда библиотеки зарегистрированы, их можно подключить с помощью следующей конструкции:
CUtil::InitJSCore(array('custom_main'));
Два указанных выше блока кода иногда идут вместе, иногда — раздельно. Например, в случае разработки собственного модуля регистрацию надо совершать в include.php модуля (к примеру), а инициировать (вызывать InitJSCore) в нужном вам месте (например, в шаблоне компонента).
Ошибка слияния файлов
Если требуется зарегистрировать два разных файла и использовать их в зависимости от условий, то такой код кажется логичным:
array( 'js' => '/bitrix/js/custom/main.js', 'css' => '/bitrix/js/custom/main.css', 'rel' => array(), ), 'custom_crm' => array( 'js' => '/bitrix/js/custom/crm.js', 'css' => '/bitrix/js/custom/crm.css', 'rel' => array(), ), ); foreach ($arJsConfig as $ext => $arExt) < \CJSCore::RegisterExt($ext, $arExt); >if (!crm) < CUtil::InitJSCore(array('custom_main')); >else < CUtil::InitJSCore(array('custom_crm')); >>);
Однако, если включена опции Объединять CSS файлы и Объединять JS файлы в настройках главного модуля, то файлы будут объединены.
Чтобы этого не произошло нужно для папок указать префиксы: не /bitrix/js/custom/crm.js , а /bitrix/js/custom_crm/crm.js
